我需要在另一个位图上绘制一个位图,但我只想绘制具有特定颜色的像素(在这种情况下是透明的)。
我了解AvoidXfermode
可以做到这一点,但自API 16以来已弃用。
现在有不同的方法吗?
谢谢
答案 0 :(得分:4)
我在私人收件箱中收到了正确答案,因此我将在此处分享:
没有替代方法。
不推荐使用AvoidXfermode
,因为它在硬件中不受支持。但是,在绘制位图时仍可使用它。
当然,另一种方法是逐像素地去,并用特定颜色替换那些,但这不是我想要的。
答案 1 :(得分: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绘制的数据字节数组,或者画布(您可以将其用作新图像)