从图像中移除白色背景
从图像中移除白色背景
提问于 2016-12-21 19:31:29
节日的问候。
我正在使用在堆栈溢出中找到的代码来删除白色背景。
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#删除所有背景白色的方法？
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-12-21 21:29:52
考虑到这些建议，我修改了代码，删除了白色加上类似的颜色。然而，它确实从图像中移除了一些非白色或浅灰。这是目前为止最接近最好的解决方案。
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');
}结果：
Stack Overflow用户
发布于 2016-12-21 19:48:14
您需要包括一个类似滑块的东西，这样您就可以为每个像素p+_的所有三个通道添加一个范围。例如，如果我的值(对于我的情况，在滑块中)是253，那么这应该在所有三个像素中应用这个值，以便像素255,255,255 alpha值= 0，像素254,254，alpha值= 0和像素s 253,253,253，alpha值=0。我想你有办法了！:)
Stack Overflow用户
发布于 2016-12-21 19:55:28
问题是剩余的像素不是完全白色的。你需要包括一些容忍轻微的颜色变化。如果您想要一个非常简单的修复，那么您可以用
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;}这也可能会移除图像中间的一些白色像素，所以请记住这一点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41270545
复制相关文章
相似问题
腾讯云开发者
