fabric js使图像纯黑白单色（只有两种颜色）

Question

嗨，我是 fabric.js 的新手。

我需要将图像转换为纯黑白图像。所以我想在我的照片中只有纯黑色 (#000000) 和白色 (#ffffff)（不是灰度！）

有人知道我如何使用 fabric.js 做到这一点吗？

我使用 fabric.js（版本 1.7.16）和 angular2。

如果我忘了写一些重要信息，请随时问我:)

我用 "workaround" 试了一下。首先将其变成灰度，然后移除所有白色部分，最后添加一个 Tint-Filter 使其余部分变成黑色。这样一来，我真的没有白色部分，但是当我使用白色背景时，我看起来像。

this.imageObject.filters[4] = new fabric.Image.filters.Grayscale();
this.imageObject.filters[5] = new fabric.Image.filters.RemoveWhite({ 
   threshold: this.removeWhiteThreshold.toString(),
   distance: 40
});
this.imageObject.filters[6] = new fabric.Image.filters.Tint({
   color: '#000000',
   opacity: 1
});

this.imageObject.applyFilters(this.canvas.renderAll.bind(this.canvas));

它有效，但我希望有一些更好的解决方案...

Answer 1

织物 3.6.x

当前稳定版本现在支持过滤器，阅读filters docs

如果您想将图像转换为纯黑/白，您需要使用 BlackWhite 滤镜：

文档中提供的示例：

var filter = new fabric.Image.filters.BlackWhite();
object.filters.push(filter);
object.applyFilters();

但是，使用此滤镜不足以将图像转换为您可能期望的纯黑白色调，一些轻微的灰色调可能会持续存在，具体取决于图像的原始对比度和颜色，请查看演示 example.

如果您真的只需要白色 (#FFF) 和黑色 (#000) 色调，组合使用以下滤镜即可：BlackWhite、Contrast、Grayscale

// Main filter 
var bw = new fabric.Image.filters.BlackWhite();
object.filters.push(bw);

// Remove minor gray tones ( #000, #FFF only )
var gs = new fabric.Image.filters.Grayscale();
object.filters.push(gs);

// Set contrast to max value
var contrast = new fabric.Image.filters.Contrast({ contrast: 1});
object.filters.push(contrast);

// Don forget to apply the filters
object.applyFilters();

Deprecated answer

Image Filters fabricjs 2.0 beta 2.0 版（测试版）支持 blackWithe 过滤器

 // manually initialize 2 filter backend to give ability to switch:
 var webglBackend = new fabric.WebglFilterBackend();
 var canvas2dBackend = new fabric.Canvas2dFilterBackend()
 fabric.filterBackend = webglBackend;

 // Your code...
 this.imageObject.filters[0] = new fabric.Image.filters.blackWhite()

fabric js使图像纯黑白单色（只有两种颜色）

fabric js make image pure black and white monochrome (just two colors)

javascript

monochrome

fabricjs

织物 3.6.x

Deprecated answer