[英]How can I convert a canvas to an image with transparency?
我目前正在尝试拍摄具有黑色背景的天气雷达图像,并使背景透明。 我正在使用画布来做到这一点。 当我显示图像时,应该透明的背景现在看起来像一个红色和黑色的棋盘格图案。 看这里:
使用的代码在这里:
function removeBlack(img) {
// Create canvas and draw image
let tmpCanvas = document.createElement('canvas');
tmpCanvas.width = img.width;
tmpCanvas.height = img.height;
let tmpCtx = tmpCanvas.getContext('2d');
tmpCtx.drawImage(img, 0, 0, tmpCanvas.width, tmpCanvas.height);
// Get image data and add opacity to black pixels
let imgData = tmpCtx.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height);
let data = imgData.data;
for (var i = 0; i < data.length; i += 4) {
let r = data[i],
g = data[i+1],
b = data[i+2];
if (r === 0 && g === 0 && b === 0) data[i + 4] = 255;
}
tmpCtx.putImageData(imgData, 0, 0);
imgData = tmpCanvas.toDataURL("image/png");
let image = document.createElement('img');
image.src = imgData;
img.remove();
tmpCanvas.remove();
return image;
}
在你的循环中应该是 data[i + 3] = 255
data[i + 4] 将进入下一个 32 位颜色字并将红色字节设置为最大值
Ps:您还必须测试 alpha 值是否应为 0 或 255 - 255 可能是完全不透明而不是透明
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.