Question

季节问候。

我正在使用我在堆栈溢出时找到的代码来删除白色背景。

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.width = w;
        ctx.height = h;
        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');
}

它没有删除所有白色，这是我在本地副本中得到的结果。

有没有办法使用JQuery或C＃删除所有背景白色？

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.width = w;
        ctx.height = h;
        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] + pixel[p+g] + pixel[p+b] ) > (170*3) - 5)
            {pixel[p+a] = 0;}
        }

        ctx.putImageData(imageData,0,0);

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

结果：

Answer 2

您需要包含类似滑块的内容，以便为每个像素[p + _]添加所有三个通道的范围。例如，如果我的值（对于我的情况，在滑块中）是253，那么这应该应用所有三个像素中的值，以便像素[255,255,255] alpha值= 0，像素[254,254,254] alpha值= 0和像素[ 253,253,253]阿尔法值= 0.我想你明白了！：）

Answer 3

问题是剩余的像素不是完全白色。您需要为颜色的轻微变化包含一些容差。如果您想要一个非常简单的修复，那么您可以用

替换条件

if (
            pixel[p+r] >= 250 &&
            pixel[p+g] >= 250 &&
            pixel[p+b] >= 250) // if close to white, then change alpha to 0
        {pixel[p+a] = 0;}

这样每个颜色通道的容差为5。但是，使用类似的行可能更好：

if ((pixel[p+r] + pixel[p+g] + pixel[p+b] ) > (255*3) - 5)
  {pixel[p+a] = 0;}

无论导致变色的通道如何，这将使您的总体容差为5。

更好的解决方案是创建一个设置变量colorTolerance的GUI元素，并使用以下公式：

if ((pixel[p+r] + pixel[p+g] + pixel[p+b] ) > (255*3) - colorTolerance)
  {pixel[p+a] = 0;}

这也可能会删除图像中间的一些白色像素，因此请记住这一点。

Answer 4

为接近白色的颜色添加容差会在一定程度上起作用，但是那些不是背景的白色的图像呢？即使你的图像中有白色，也不是背景。（波尔卡圆点和带状腰部的东西）

我的回答是否定的;没有好的方法可以完全用代码做你想要的东西。您可以使用必要的代码进行粗略删除，但每个图像都需要由人员进行审核。你需要像photoshop这样的东西。

从图像中删除白色背景

4 个答案: