使用Fabric.js或Imagick从图像中去除白色。

Question

我遇到了一个比较困难的情况，很难在Google上搜索到详细解释。我们公司在铝板上印刷照片，给我们的客户两个选择：

1. 第一种选择是按照客户提供的图片在铝板上打印，所以如果图片有白色背景，则会将白色背景一起打印出来。

2. 第二种选择是我们可以不使用白色进行打印。我们会保留所有“白色值”（<-这是我能想到的最好的解释）的透明度，而不进行打印。

我知道Fabric JS中有一个removeWhite滤镜，它可以用透明替换白色区域。但这不是我需要的。我需要一个Fabric JS滤镜、ImageMagick或任何其他PHP或JS解决方案，可以使像素的“白色值”变成透明。我知道这些东西可能对你们来说听起来非常模糊，但让我试着这样解释：

1. 如果我遇到一个白色像素，我需要将它变成透明。

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

3. 如果我遇到一个彩色像素，我也需要将使其变亮的“白色值”变成透明。

以下是我尝试实现的滤镜/效果的之前和之后的例子：

Before: After: 如果你不理解我的请求，请随时询问。

- Dageraad

---

在Fabric中，您可以创建自己的图像滤镜。例如，查看Greyscale的源代码，网址为：https://github.com/kangax/fabric.js/blob/master/src/image_filters.js#L11-L46 - kangax

谢谢您的回复，我会研究一下。我已经在尝试使用您的Redify过滤器了。 - Dageraad

Answer 1

我搞定了。通过使用YUV颜色空间的因子，我可以创建一个Fabric 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，你可以修改透明度因子。

很抱歉我无法更详细地解释这个面料过滤器是如何工作的。

- Dageraad

Answer 2

所以在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));

- MarZab

---

在新的Fabric.js版本中，这个方法的名称已更改为RemoveColor。 - L_K