Question

我在画布上绘制了一个复杂的图像，我希望能够随意改变该图像中区域的透明度。我将这些区域概述为单独文件中的掩码。有没有办法实现这个目标？

我的想法是逐个像素地分析画布，如果所讨论的像素落入蒙版勾勒出的特定区域，请相应地修改它的透明度。但后来我不确定如何检查像素是否在该区域内？我可能每个区域都有一个单独的画布元素，只是检查相应的像素是否存在。但这听起来很笨拙。有更好的方法吗？优雅？也许一些数学魔术？或者我不知道的方法？

Answer 1

如果要检查图像中的像素是黑色还是白色，首先需要使用getImageData获取数据，然后只需检查正确的值（4个字节，因为RGBA）坐标。

var maskCanvas = document.createElement('canvas');
maskCanvas.width = w;
maskCanvas.height = h;
var context = maskCanvas.getContext('2d');
context.drawImage(yourMaskImage, 0, 0);
var pixels = context.getImageData(0, 0, w, h).data;

如果您的图片尺寸为(w, h)，则您的阵列尺寸为w*h*4，并且您可以使用以下颜色(x,y)获得颜色：

var i = 4*(x+w*y); // 
var color = (pixels[i]<<16) + (pixels[i+1]<<8) + (pixels[i+2]); // I don't care about the alpha

当您直接在字节数组上工作时，这非常快（如果您在检查之间保持数组）。

请注意，包含蒙版的图片必须来自与主页相同的域。

如何检查像素是否落在特定区域内？

1 个答案: