Question

我正在尝试创建像this

这样的图像的黑白副本

对于某些图片来说，它的工作非常完美，对于某些图片，我可以看到这个偏斜的结果，如链接所示。

这是我的代码：

var imageData = ctx.createImageData(c.width, c.height);

for (var i=0; i < imageData.data.length; i+=4) 
{
    if (someLogicRefferingToOriginalImageData == true) {
        imageData.data[i+0] = 255;
        imageData.data[i+1] = 255;
        imageData.data[i+2] = 255;
        imageData.data[i+3] = 255;
    }
    else 
    {
        imageData.data[i+0] = 0;
        imageData.data[i+1] = 0;
        imageData.data[i+2] = 0;
        imageData.data[i+3] = 255;
    }
}

ctx.putImageData(imageData,0 ,0);

Answer 1

您在浏览每个像素时都有正确的想法，但您不能仅将某些像素设为白色且某些像素为黑色。

每个像素应该相对于它的现有值进行操作。某些过滤器的公式包括B＆amp; W.亮度算法似乎是您正在寻找的。也许这个链接here会指出你正确的黑白方向。

Answer 2

查看您的代码，它应该可以工作。尝试使用32位数组，这是每个像素一个数组元素而不是4，这应该避免元素错误计数的任何错误：

var imageData = ctx.createImageData(c.width, c.height);
var buffer = new Uint32Array(imageData.data.buffer);

for (var i=0; i < buffer.length; i++) {
    if (someLogicRefferingToOriginalImageData == true) {
        buffer[i] = 0xFFFFFFFF;
    } else {
        buffer[i] = 0xFF000000;
    }
}

imageData.data.set(new Uint8ClampedArray(buffer));
ctx.putImageData(imageData, 0, 0);

使用imageData进行HTML5画布像素操作

2 个答案: