HTML5 Canvas getImageData()方法设置图像黑白颜色
gooood个人博客网站
canvas
要使用HTML5 Canvas灰度图像的颜色，我们可以迭代图像中的所有像素，计算每个像素的亮度，然后将红色，绿色和蓝色分量设置为等于亮度。
注意：getImageData（）方法要求图像托管在Web服务器上，该域与执行它的代码具有相同的域。 如果不满足此条件，将抛出SECURITY_ERR异常。
html代码：
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas></canvas> <script> function drawImage(imageObj) { var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x = 69; var y = 50; context.drawImage(imageObj, x, y); var imageData = context.getImageData(x, y, imageObj.width, imageObj.height); var data = imageData.data; for(var i = 0; i < data.length; i += 4) { var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]; // red data[i] = brightness; // green data[i + 1] = brightness; // blue data[i + 2] = brightness; } // overwrite original image context.putImageData(imageData, x, y); } var imageObj = new Image(); imageObj.onload = function() { drawImage(this); }; imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; </script> </body> </html>