Question

我希望在fabric.Image对象上应用图像过滤器，但我无法这样做。

这是我的代码：

（方法：1）创建图像并添加到画布

var canvas = new fabric.Canvas('canvas');
var img = document.querySelector('.images img.img_dragging');
var newImg = new fabric.Image(img, {
                        scaleX: .50,
                        scaleY:.50,
                     });
newImg.filters.push(new fabric.Image.filters.RemoveWhite({ threshold:10 ,distance: 100 }));
newImg.applyFilters(canvas.renderAll.bind(canvas));
canvas.add(newImg);

Html （图片src只是来自网络的随机图片，但我们的项目图片有些相似）

<img draggable="true" src="http://cdn.homedit.com/wp-content/uploads/2011/01/blue-small-tufted-sofa.jpg" width="250" height="250"></img>

上面我可以将图像添加到画布并在画布上操作图像。

我的要求是从上图中删除多余的空格。

根据我在网上的阅读，我们可以实现以上内容：

（接近：2）：

fabric.Image.fromURL('http://cdn.homedit.com/wp-content/uploads/2011/01/blue-small-tufted-sofa.jpg', function(img){                
     img.filters.push(new fabric.Image.filters.RemoveWhite({ threshold:10 ,distance: 100 }));
     img.applyFilters(canvas.renderAll.bind(canvas));
     img.scale(0.5);
     canvas.add(img);           
});

因此，我希望了解是否可以使用方法1的过滤器以及是否有关于如何实现它的片段。或者过滤器只能应用于fromURL方法。

任何指针都会有很大的帮助。

干杯！ AJ

P.S：对任何错别字道歉。

我们可以在新的fabric.Image（）上应用图像过滤器吗？

0 个答案: