Version compl�te: jsB@nk » Image » Couleur gris Image Converter avec JavaScript
URL: https://www.javascriptbank.com/color-grayscale-image-converter-with-javascript.html
Comment 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
<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><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>
/javascript/image/Color_Grayscale_Image_Converter_with_JavaScript/nature-1.jpg/javascript/jquery.js