Full version: jsB@nk » Image » Color Grayscale Image Converter with JavaScript
URL: https://www.javascriptbank.com/color-grayscale-image-converter-with-javascript.html
How to convert image to grayscale? A very easy, use a grayscale Photoshop filter, this solution gives a very good result. But if you want to convert grayscale image on the web-based applications, how should we do? It's still a filter, because Adobe has released an online tool for editing pictures, or some other image editors.But this is not a topic jsB@nk.com want to discuss. jsB@nk.com's talking about a color grayscale image converter with JavaScript, a free simple JavaScript example code to convert grayscale on your web pages directly.Check out this free JavaScript example code to learn how to desaturate an image (convert color images to grayscale) using JavaScript.
Full version: jsB@nk » Image » Color Grayscale Image Converter with 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