HTML5 холст манипуляции пикселей с imageData

Question

Я пытаюсь создать какую-то черно-белую копию такого изображения

для некоторых картинок это работает отлично, а для некоторых картинок я получаю этот искаженный результат, как вы можете видеть по ссылке.

это мой код:

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

Глядя на ваш код, он должен работать. Вместо этого попробуйте поработать с 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);

Answer 2

У вас есть правильная идея прохождения каждого пикселя, но вы не можете просто сделать определенные пиксели белыми, а некоторые пиксели черными.

Каждый пиксель должен управляться относительно его существующего значения. Есть формулы для определенных фильтров, включая B&W. Алгоритм яркости, кажется, то, что вы ищете. Возможно, эта ссылка укажет вам правильное направление для черно-белых.