Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chuyển đổi ảnh sang trắng đen với JavaScript
URL: https://www.javascriptbank.com/color-grayscale-image-converter-with-javascript.html
Làm cách nào để chuyển một ảnh sang chế độ đen trắng? Đơn giản là chúng ta dùng một bộ lọc của Photoshop. Nhưng nếu muốn chuyển trực tiếp trên trang web thì làm sao? Cũng đơn giản là dùng một bộ lọc, bởi Adobe đã phát hành công cụ Photoshop trực tuyến để chỉnh sửa ảnh đơn giản, hoặc dùng bất kì công cụ chỉnh sửa ảnh trực tuyến khác.Nhưng đây không phải là đề tài mà [email protected] muốn đề cập. Chủ đề mà [email protected] muốn nói đến là một trình chuyển đổi ảnh sang chế độ đen trắng đơn giản dùng JavaScript. Bạn hãy xem thử hiệu ứng này để biết cách nó hoạt động ra sao.
Phiên bản đầy đủ: jsB@nk » Hình ảnh » Chuyển đổi ảnh sang trắng đen với 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