5

我需要在另一个位图上绘制位图,但我只想在具有特定颜色的像素上绘制(在这种情况下是透明的)。我知道AvoidXfermode可以这样做,但自 API 16 起已弃用。现在有不同的方法吗?

谢谢

4

2 回答 2

4

我在我的私人收件箱中收到了正确的答案,所以我将在这里分享:没有替代方法。 AvoidXfermode已弃用,因为它在硬件中不受支持。但是,在位图上绘图时仍然可以使用它。

当然,另一种方法是逐个像素,并用特定颜色替换那些,但这不是我想要的。

于 2013-04-22T06:27:41.563 回答
1

在这里,假设位图大小相同。

var image1, image2;

var newCanvas = document.createElement('canvas');
var newContext = newCanvas.getContext('2d');
newCanvas.width = image1.width;
newCanvas.height = image1.height;
newContext.drawImage(image1, 0, 0);
var imgData = newContext.getImageData(0,0,newCanvas.width, newCanvas.height);
newContext.drawImage(image2, 0, 0);
var imgData2 = newContext.getImageData(0,0,newCanvas.width, newCanvas.height);

for (var i = 0; i < imgData.data.length; i += 4) {
    if( imgData.data[i] < 20        //If Red is less than 20
        && imgData.data[i+1] == 40    //If Green is 40
        && imgData.data[i+2] >= 240   //If Blue is over 240
        && imgData.data[i+3] >= 240) //If Alpha is over 240
    {
        imgData.data[i] = imgData2.data[i];
        imgData.data[i+1] = imgData2.data[i+1];
        imgData.data[i+2] = imgData2.data[i+2];
        imgData.data[i+3] = imgData2.data[i+3];
    }
}
imgData2 = null;
newContext.putImageData(imgData, 0, 0);

如果任何像素符合这些参数,那应该只是照原样复制它。

最终结果要么是 imgData,一个可以使用 putImageData 绘制的字节数据数组,要么是一个画布(基本上可以用作新图像)

于 2013-04-22T01:06:48.183 回答