image - 使用 html5 Canvas 图像时如何去除背景颜色？

Question

如果 Canvas 可以从加载(绘制图像)到 Canvas 中的外部图像中去除背景颜色？

我认为 canvas 可以操纵像素，所以它应该去除图像背景颜色。经过一番搜索，我仍然找不到答案或任何想法。

Answer 1

在 a demo I wrote (个人垃圾邮件；)您可能需要一些东西:

full source在这里

• 首先它读取一张图片

  brush.load({
  imageUrl: "brush-2.png",
  onload: function (brush) { 
      setBG(brush);
  }
  

  });

• 然后它操纵像素

  for(p = 0; p < l; p = p + 4){
    r = pixels.data[p + 0];
    g = pixels.data[p + 1];
    b = pixels.data[p + 2];
    a = pixels.data[p + 3];
  
    pixels.data[p + 0] = k;
    pixels.data[p + 1] = m;
    pixels.data[p + 2] = o;
    pixels.data[p + 3] = a;
  

• 然后它从 imageData 设置图像

  document.body.style.backgroundImage= "url(" + ctx.canvas.toDataURL() + ")";
  

more here