HTML5 画布像素操作

HTML5 canvas pixel manipulation

本文关键字：像素 操作 布像素 HTML5      更新时间：2023-09-26

我只是想养成像素操作的习惯，它不会改变任何东西。

我使用以下循环来反转每个像素：

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';
相关文章：