Применение изменения цвета к изображению в качестве наложения, сохраняя оригинальную текстуру / шейдеры Javascript

Question

Выполнение «getimagedata» для замены цвета пикселей в изображении, однако, при этом полностью удаляются исходные пиксели, требуется добиться наложения на существующие пиксели для изменения цвета при сохранении текстуры, шейдеров и формы, если это возможно.

var imageData = canvasContext.getImageData(video,0,0,canvasOutput.width,canvasOutput.height);
for (j = 0; j < imageData.data.length; j += 4){
            imageData.data[j] = rgb[0]; //red pixel
            imageData.data[j + 1] = rgb[1]; //green pixel
            imageData.data[j + 2] = rgb[2]; //blue pixel
            }
        canvasContext.putImageData(imageData,0,0)

пиксели перезаписываются, а не накладываются на изображение цветом.

Answer 1

нашел решение, используя OpenCV

cv.rectangle(overlayMat, point1, point2, [rgb[0], rgb[1], rgb[2], rgb[3]], -1); //img,(x,y), (x+width,y+height), scala 4 colour, fill
cv.addWeighted(overlayMat,alpha,vidMat,1 - alpha,0,vidMat);

применяет цвет к точке x, y точки 1, затем размер вычисляется с использованием x + ширина, y + высота в точке 2, цвет основан на скалярном массиве RGBA, -1 заполняет всю область, указанную в точке 2 .

add weighted применяет цветной прямоугольник, сохраненный в другом мате, к исходному мату, используя прозрачность альфа-значений.