我希望在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:对任何错别字道歉。