Не можете выполнить более одной операции над объектом ImageData?

Question

Я пытаюсь использовать холст для маскировки изображения, используя несколько отдельных масок (мне удалось поместить каждую из них в отдельный объект ImageData).

Изображения маски черно-белые, без альфа-каналаканал.Мне нужно наложить маски друг на друга, поэтому мне нужно (не?) Предварительно умножить альфа или поместить красный канал в альфа-канал.

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

base.iMask = function(cx, imgData, maskLeft, maskRight, maskTop, maskBottom) {
        var index = 0;
        var newdata = cx.createImageData(imgData);

        for (var i=0; i<maskLeft.width; i++) {
            for (var j=0; j<maskLeft.height; j++) {
                index = (i*4)*maskLeft.width+(j*4);

                newdata.data[index+3] = maskLeft.data[index];
            }
        }

        // The same cycle is repeated for each mask (4 total)

        return newdata;

Проблема в том, что применяется только последняя маска.Я пытался использовать putImageData, а затем getImageData перед каждым циклом, но это не сработало!

Функция, которая выполняет (не) предварительное умножение объекта ImageData (), решит мою проблему.Есть идеи?

Answer 1

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

Проблема была в том, что я перезаписывал данные пикселей. Это новый код:

var index = 0;
        for (var i=0; i<maskData.width; i++) {
            for (var j=0; j<maskData.height; j++) {
                index = (i*4)*maskData.width+(j*4);
                maskData.data[index] = 255 - (255*4 - stripeTopData.data[index] - stripeBottomData.data[index] - stripeLeftData.data[index] - stripeRightData.data[index]);
            }
        }

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