如何用JavaScript在Canvas中让土豆图片的白色区域透明？

我正在开发一款点击土豆获取收益的点击类游戏，用JavaScript Canvas实现。现在遇到一个问题：想把potatoClick图片里的白色区域设为透明，但调整alpha值和图片透明度都没用。我可以修改土豆的绘制方式，但希望尽量保持现有实现简洁，求可行的解决方法。

现有代码：

var canvas, canvasContext, imgaeAssets;

window.onload = function() {
  canvas = document.getElementById('gaming');
  canvasContext = canvas.getContext('2d');
  canvasContext.canvas.width = window.innerWidth;
  canvasContext.canvas.height = window.innerHeight * 0.95;

  setInterval(mainloop, 1000 / 50);
}

var potatoes = 0;

var potatoClick = new Image();
potatoClick.src = 'images/potato.jfif'

function mainloop() { // runs once every second

  colorRect(0, 0, canvas.width, canvas.height, 'black')

  canvasContext.font = "15px Comic Sans MS";
  canvasContext.fillStyle = "white";

  canvas.style.backgroundColor = 'rgba(255, 255, 255, 0)';
  drawImg(potatoClick, 0, (canvas.height / 2) - 125, 500, 250)

  if (potatoes > 0) {
    canvasContext.fillText(`you have ${potatoes} potatoes`, 0, 30);
  }
}

function colorRect(x, y, w, h, c) {
  canvasContext.fillStyle = c;
  canvasContext.fillRect(x, y, w, h);
}

function drawImg(src, x, y, w, h) {
  canvasContext.drawImage(src, x, y, w, h);
}

function printMousePos(event) {}

解决方案一：预处理图片（推荐，兼容性好） #

在图片加载完成后，用离屏Canvas遍历像素，将白色区域转为透明，之后直接使用处理后的Canvas绘制，不影响原有逻辑：

修改图片加载部分的代码：

var potatoClick = new Image();
potatoClick.src = 'images/potato.jfif';

// 图片加载完成后进行透明化处理
potatoClick.onload = function() {
  const offscreenCanvas = document.createElement('canvas');
  const offscreenCtx = offscreenCanvas.getContext('2d');
  offscreenCanvas.width = potatoClick.width;
  offscreenCanvas.height = potatoClick.height;

  // 绘制原图到离屏Canvas
  offscreenCtx.drawImage(potatoClick, 0, 0);

  // 获取像素数据
  const imageData = offscreenCtx.getImageData(0, 0, offscreenCanvas.width, offscreenCanvas.height);
  const data = imageData.data;

  // 遍历所有像素，将接近白色的区域设为透明
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];
    // 可调整阈值（比如240），适配不同程度的白色背景
    if (r > 240 && g > 240 && b > 240) {
      data[i + 3] = 0; // 设置alpha通道为0，完全透明
    }
  }

  // 将处理后的像素放回离屏Canvas
  offscreenCtx.putImageData(imageData, 0, 0);

  // 替换原图片为处理后的Canvas，后续绘制直接用它
  potatoClick = offscreenCanvas;
};

优点：一次性处理，后续绘制无需额外操作；可通过阈值调整，避免误删土豆本身的白色细节；兼容性好，支持所有现代浏览器。

解决方案二：使用混合模式（极简但有局限性） #

如果图片背景是纯白色且土豆本身没有白色区域，可以直接用Canvas的混合模式擦除白色：

修改drawImg函数：

function drawImg(src, x, y, w, h) {
  // 先绘制原图
  canvasContext.drawImage(src, x, y, w, h);
  // 设置混合模式：用后续绘制的内容擦除已有内容
  canvasContext.globalCompositeOperation = 'destination-out';
  // 绘制和图片同区域的白色矩形，擦除白色背景
  canvasContext.fillStyle = 'white';
  canvasContext.fillRect(x, y, w, h);
  // 恢复默认混合模式，不影响其他绘制
  canvasContext.globalCompositeOperation = 'source-over';
}

优点：代码改动极小；无需预处理。
局限性：会擦除图片中所有白色像素，若土豆本身有白色细节会被一并删除；仅适用于纯白色背景的图片。

内容的提问来源于stack exchange，提问作者Jeff