在画布上图像的不透明部分周围绘制边框

有时候需要在 canvas 上绘制一个图像，并在图像的不透明部分周围绘制边框。下面是一个简单的实现方案：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'https://example.com/image.png';

img.onload = function() {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  
  const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  
  for (let y = 0; y < canvas.height; y++) {
    for (let x = 0; x < canvas.width; x++) {
      const idx = (y * canvas.width + x) * 4;
      if (imgData.data[idx + 3] > 0) { // 不透明部分的像素
        if (imgData.data[idx] !== 255 || imgData.data[idx + 1] !== 255 || imgData.data[idx + 2] !== 255) { // 不是白色
          ctx.fillStyle = 'red';
          ctx.fillRect(x, y, 1, 1); // 绘制一个红色像素
        }
      }     
    }
  }
};

以上代码会在 canvas 上绘制一张图片，并在不透明的像素周围绘制一个红色的边框。具体实现方式是利用 getImageData 方法获取画布上的像素数据，并遍历每一个像素，判断它是否不透明，如果不透明，再判断它是否是白色的像素，如果不是白色的像素，就绘制一个红色的像素来作为边框。

此方法对于大图像会比较耗时，如果需要优化，可以限制只遍历图像边缘的像素。