我们可以在新的fabric.Image()上应用图像过滤器吗?

时间:2015-10-13 02:43:48

标签: fabricjs

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

0 个答案:

没有答案