将颜色更改作为叠加应用于图像，保留原始纹理/着色器 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);

将颜色应用于点 1 的 x，y 位置，然后使用 x + 宽度、y + 点 2 中的高度计算大小，颜色基于 RGBA 标量数组，-1 填充点 2 中指定的整个区域。

添加加权将使用 Alpha 值的透明度将保存在另一个垫子中的彩色矩形应用于原始垫子。