»
AnglaisFrançaisVietnamien

Imprimer - Couleur gris Image Converter avec JavaScript - JavaScriptBank.com

Version complète: jsB@nk » Image » Couleur gris Image Converter avec JavaScript
URL: https://www.javascriptbank.com/color-grayscale-image-converter-with-javascript.html

Couleur gris Image Converter avec JavaScript © JavaScriptBank.comComment faire pour convertir l'image en niveaux de gris? niveaux de gris de Photoshop filtre, cette solution donne un tr

Version complète: jsB@nk » Image » Couleur gris Image Converter avec JavaScript
URL: https://www.javascriptbank.com/color-grayscale-image-converter-with-javascript.html



JavaScript
<script type="text/javascript" src="/javascript/jquery.js"></script><script type="text/javascript">    $(document).ready(function(){        $('#toggleDesaturate').click(function(){            var imgObj = document.getElementById('image');                        if($.browser.msie){                grayscaleImageIE(imgObj);            } else {                imgObj.src = grayscaleImage(imgObj);            }                   });    });    function grayscaleImageIE(imgObj)    {        imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';    }    function grayscaleImage(imgObj)    {        var canvas = document.createElement('canvas');        var canvasContext = canvas.getContext('2d');                var imgW = imgObj.width;        var imgH = imgObj.height;        canvas.width = imgW;        canvas.height = imgH;                canvasContext.drawImage(imgObj, 0, 0);        var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);                for(var y = 0; y < imgPixels.height; y++){            for(var x = 0; x < imgPixels.width; x++){                var i = (y * 4) * imgPixels.width + x * 4;                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;                imgPixels.data[i] = avg;                 imgPixels.data[i + 1] = avg;                 imgPixels.data[i + 2] = avg;            }        }                canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);        return canvas.toDataURL();    }</script>


HTML
<p>Click the button below the image to desaturate it.</p>                <div>            <p>                <strong>Original image:</strong><br/>                <img src="nature-1.jpg" alt="" />            </p>                       <p>                <strong>Image which will be desaturated:</strong><br/>            <img src="nature-1.jpg" alt="" id="image" />            </p>                   </div>        <form><button id="toggleDesaturate" type="button">Desaturate Image</button></form>


Files
/javascript/image/Color_Grayscale_Image_Converter_with_JavaScript/nature-1.jpg/javascript/jquery.js