Javascript 画布图像数据删除白色像素

我有一些html格式的图片，背景是白色的。我需要删除白色背景。我想我可以让所有的白色像素都透明，但我不知道怎么做。我只想使用html/javascript。

从带有“getImageData”的画布对象返回的图像数据只是RGBA像素信息，即红色、绿色、蓝色和alpha透明度。因此，您可以获取图像数据，并在其中进行迭代，一次查看四个像素。当你看到一个白色的，你可以把它调零（和alpha值一起）

现在的问题是，您不会对结果感到满意，因为在非白色元素周围仍然会有一个“光环”。原始图像（可能）在彩色区域的边缘略微模糊，有效地消除了锯齿。因此，沿边缘有一些像素比主图像稍亮，在移除所有纯白色像素后，您将看到这些像素仍然存在

要真正清理边缘是相当棘手的，具体取决于您所获得的源图像的类型。我不认为这是最先进的图像处理或任何东西，但它不是微不足道的。

以下是如何做到这一点

function white2transparent(img)
{
    var c = document.createElement('canvas');

    var w = img.width, h = img.height;

    c.width = w;
    c.height = h;

    var ctx = c.getContext('2d');

    ctx.drawImage(img, 0, 0, w, h);
    var imageData = ctx.getImageData(0,0, w, h);
    var pixel = imageData.data;

    var r=0, g=1, b=2,a=3;
    for (var p = 0; p<pixel.length; p+=4)
    {
      if (
          pixel[p+r] == 255 &&
          pixel[p+g] == 255 &&
          pixel[p+b] == 255) // if white then change alpha to 0
      {pixel[p+a] = 0;}
    }

    ctx.putImageData(imageData,0,0);

    return c.toDataURL('image/png');
}

---

---

要使此代码正常工作，映像必须与代码来自同一域（出于安全原因）

不要使用JPG，而是在图像周围使用透明背景的PNG。您将获得更好的结果。

但如果您想在绘制之前清除图像数据，有一个较短的解决方案：）

函数clearData（imageData）
{
var d=imageData.data；
var L=d.长度；
对于（变量i=3；i

var someimage = document.getElementById('imageid');
someimage.src = white2transparent(someimage);

function clearData( imageData  )
{
    var d = imageData.data;
    var L = d.length;
    for ( var i = 3; i < L; i += 4 )
    {
        d[i] = 0;
    }
}