-1

嗨，我对 fabric.js 很陌生。

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

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

我将fabric.js（版本1.7.16）与angular2一起使用。

随时问我是否忘记写一些重要信息:)

我尝试了“解决方法”。首先使其变为灰度，然后删除所有白色部分，最后添加一个色调过滤器以使其余部分变为黑色。有了它，我并没有真正的白色部分，但是当我使用白色背景时，我看起来像。

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));

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

4

1 回答 1

2

织物 js 3.6.x

当前稳定版本现在支持过滤器，请阅读过滤器文档

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

文档中提供的示例：

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

但是，使用此滤镜不足以将图像仅转换为您可能期望的黑白色调，根据图像的原始对比度和颜色，一些轻微的灰色色调可能会持续存在，请查看演示示例。

如果您真的只需要白色 (#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();

已弃用的答案

图像过滤器fabricjs 2.0 betablackWithe 2.0 (beta) 版本支持过滤器 

 // 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()
于 2017-07-23T05:16:15.003 回答