Question

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

Answer 1

以下是如何做到这一点..

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

并使用它将图像的src设置为此方法的返回值。

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

http://jsfiddle.net/gaby/UuCys/

要使此代码生效，图像必须来自与代码相同的域（出于安全原因）。

Answer 2

不使用JPG，而是使用图像周围带有透明背景的PNG。你会得到更好的结果。

Answer 3

使用“getImageData”从画布对象返回的图像数据只是RGBA像素信息 - 即红色，绿色，蓝色和Alpha透明度。因此，您可以获取图像数据并进行迭代，一次查看四个像素。当你看到一个白色的时，你可以将其归零（以及alpha值）。

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

要真正清理边缘是非常棘手的，具体取决于你所拥有的源图像类型。我不认为它是最先进的图像处理或任何东西，但它并非无足轻重。

Answer 4

但是如果你想在绘图之前清除imageData有一个更短的解决方案：）

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

canvas ImageData删除白色像素

4 个答案: