织物js或想象从图像中删除白色

Question

我遇到了这种情况，我很难在谷歌上搜索和解释。

我们公司在铝上打印照片，我们给顾客两种选择。

>

第一个选择是将他们的图片打印在铝上，就像他们给我们的图片一样，所以如果图片有白色背景，图片就会用白色背景打印。就这么简单。

第二种选择是，我们可以不使用白色打印他们的图片。而不是所有的“白色值”(

我知道织物JS中有一个远程白色过滤器，它可以用透明的区域代替白色区域。但这不是我需要的。我需要一个织物JS过滤器、ImageMagick之类的东西或任何其他PHP或JS解决方案，可以将像素的“白色值”变成透明的。我知道这些东西对你们来说可能听起来很模糊，但让我试着这样解释：

>

如果我遇到一个白色像素，我需要让它透明。

如果遇到灰色像素，我需要把它从白色和黑色的组合变成透明和黑色的组合。

如果我得到一个交叉的彩色像素，我还需要将“白色值”变为透明。

以下是我试图完成的滤镜/效果的前后示例：

之前：

后：

如果你不明白我在问什么，请不要犹豫问我。

Answer 1

所以Fabric中有一个过滤器。js就是这样做的。

http://fabricjs.com/docs/fabric.Image.filters.RemoveWhite.html

var filter = new fabric.Image.filters.RemoveWhite({
  threshold: 40,
  distance: 140
});
image.filters.push(filter);
image.applyFilters(canvas.renderAll.bind(canvas));

Answer 2

我让它工作了。通过使用 YUV 色彩空间中的因子，我可以创建一个结构 JS 图像滤镜。

为了得到我想要的结果，进行了大量的反复试验。因此，我没有(详细)的描述这是如何工作的。据我所知，我已经使用了YUV因子来获得(RGB)颜色的亮度。

for (i = 0; i < iLen; i++) {
    for (j = 0; j < jLen; j++) {
      index = (i * 4) * jLen + (j * 4);
      var yuv = {};
      yuv.r = data[index] / 255 * 1 * 0.299;     
      yuv.g = data[index + 1] / 255 * 1 * 0.587; //we use the yuv formula constants
      yuv.b = data[index + 2] / 255 * 1 * 0.114; //to try to catch the Y (brightness)
      yuv.y = yuv.r + yuv.g + yuv.b;             //you can tweak this
      data[index + 3] = 350 - (yuv.y / 1 * 255); //by changing the first number after the "=" on this line!
    }
}

不知何故，通过弄乱最后一行的350，您可以改变透明度因子。

很抱歉，无法详细解释此织物过滤器的工作原理。