织物js或imagick从图像中删除白色 [英] fabric js or imagick remove white from image

问题描述

我遇到这种情况，我很难在Google上搜索并解释。

I got this situation which is hard for me to search on Google and explain.

我们公司在铝上打印照片，我们为客户提供两种选择。

Our company prints photos on aluminium and we give our customers two choices.

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

1. The first choice is to print their pictures on aluminium just like they gave the picture to us, so if the picture has a white background the picture gets printed with a white background. Easy like that.

第二个选项是我们可以在不使用
white的情况下打印照片。而不是所有的白色值（< - 最好我可以提出
来解释），我们将其保持透明。

The second option is that we can print their picture without using white. instead of all the "white values" (<- the best I can come up with to explain) being printed we leave it transparent.

我知道结构JS中有这个removeWhite过滤器可以用透明的替换白色区域。但这不是我需要的。我需要Fabric JS过滤器，ImageMagick或任何其他PHP或JS解决方案，可以将像素的白色值透明化。
我知道这些东西对你们来说可能听起来很模糊，但让我试着用这种方式解释：

I know there is this removeWhite filter in fabric JS which can replace white areas with transparent ones. But this is not what I need. I need a Fabric JS filter, ImageMagick thing or any other PHP or JS solution that can turn the "white value" of a pixel transparent. I know this stuff may sounds very vague to you guys, but let me try to explain this way:

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

• If I come across a white pixel I need to make it transparent.

如果我遇到一个灰色像素，我需要将它从一个组合转为$ b白色和黑色的$ b组合成透明和黑色。

If I come across a grey pixel, I need to turn it from a combination of white and black into a combination of transparent and black.

如果我穿过一个彩色像素，我还需要打开白色 b $ b值这使得它变得透明。

If I come a cross a coloured pixel, I also need to turn the "white value" which makes it light turn to transparent.

这是过滤器的前后示例/效果我试图完成：

Here is an before and after example of the filter/effect I try to accomplish:

之前：

之后：

如果你不喜欢我，请不要犹豫我不明白我要求的是什么。

Please don't hesitate to ask me anything if you don't understand what I'm asking for.

推荐答案

我得到了它的工作。通过使用 YUV 颜色空间中的因子，我可以创建一个Fabric JS图像过滤器。

I got it to work. By using factors from the YUV color space, I could create a Fabric JS image filter.

获得我想要的结果需要大量的试验和错误。
因此我没有（详细的）说明这是如何工作的。
据我所知，我已经使用了YUV因子来获得（RGB）颜色的亮度。

It was a lot of Trial-and-error to get the result I was looking for. Therefore I don't have a (detailed) description of how this works. For all I know is that I have used the YUV factors to get the brightness of the (RGB) colours.

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你可以改变透明度因子。

Somehow by messing with the 350 on the last line you can alter the transparency factor.

很抱歉无法解释有关此Fabric滤镜如何工作的更多信息。

Sorry for not being able to explain more about how this Fabric filter works.

这篇关于织物js或imagick从图像中删除白色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！