Question

我正在尝试使用canvas来使用几个单独的蒙版来屏蔽图像（我设法将它们中的每一个都放在一个单独的ImageData对象中）。

蒙版图像是黑白的，没有alpha通道。我需要将蒙版层叠在一起，所以我需要（un？）预乘alpha，或者将红色通道放在alpha通道中。

当我尝试仅将一个蒙版应用于原始图像时，它的效果非常好，但是当我尝试使用多个蒙版时，它会中断。我是这样做的：

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（）对象执行（un）预乘的函数可以解决我的问题。有什么想法吗？

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]);
            }
        }

这组合了所有四个蒙版并生成一个B＆amp; W图像，我可以在以后使用它来掩盖我的原始图像。

无法对ImageData对象执行多个操作？

1 个答案: