如何将 canvas 转换为具有透明度的图像？

Question

我目前正在尝试拍摄具有黑色背景的天气雷达图像，并使背景透明。我正在使用 canvas 来执行此操作。当我显示图像时，应该透明的背景现在看起来像红黑棋盘格图案。看这里：

正在使用的代码在这里：

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

Answer 1

在你的循环中应该是 data[i + 3] = 255

data[i + 4] 将进入下一个 32 位颜色字并将红色字节设置为最大值

Ps：您还必须测试 alpha 值是否应为 0 或 255 - 255 可能是完全不透明的而不是透明的

如何将 canvas 转换为具有透明度的图像？

How can I convert a canvas to an image with transparency?

javascript

canvas

html5-canvas