我只是想养成像素处理的习惯,它不会改变任何东西。
我使用以下循环反转每个像素:
var newImage = context.createImageData(canvas.width, canvas.height);
var arr = context.getImageData(0, 0, canvas.width, canvas.height);
var pixels = arr.data;
for(var i = 0; i < pixels.length; i+=4){
var r = 255 - pixels[i];
var g = 255 - pixels[i + 1];
var b = 255 - pixels[i + 2];
var a = pixels[i + 3];
newImage.data[i] = r;
newImage.data[i + 1] = g;
newImage.data[i + 2] = b;
newImage.data[i + 3] = a;
}
但是当我尝试清除画布并重写它时,什么也没发生:
context.clearRect(0, 0, canvas.width, canvas.height);
context.putImageData(newImage, 0, 0);
为什么这不起作用?我究竟做错了什么?
问题来自图像(尚未加载)。您的代码有效(观看无图像的小提琴-http: //jsfiddle.net/B82nk/1/)。
您必须执行以下操作:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 322;
var image_obj = new Image();
image_obj.onload = function(){
var newImage = context.createImageData(canvas.width, canvas.height);
var arr = context.getImageData(0, 0, canvas.width, canvas.height);
var pixels = arr.data;
for(var i = 0; i < pixels.length; i+=4){
var r = 255 - pixels[i];
var g = 255 - pixels[i + 1];
var b = 255 - pixels[i + 2];
var a = pixels[i + 3];
newImage.data[i] = r;
newImage.data[i + 1] = g;
newImage.data[i + 2] = b;
newImage.data[i + 3] = a;
}
context.clearRect(0, 0, canvas.width, canvas.height);
context.putImageData(newImage, 0, 0);
}
image_obj.src = 'http://www.johnchapple.com/jcwp/wp-content/uploads/2012/09/photography_quotes.jpg';
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句