fabricjs不应用过滤器和大小是不正确的

Question

我有这样的脚本：

export function filter(url) { 
    var c = document.createElement('canvas') 
    c.id = "canvas_greyscale" 
    var canvas = new fabric.Canvas('canvas_greyscale') 
    fabric.Image.fromURL(url, function(oImg) { 
     canvas.height = oImg.height 
     canvas.width = oImg.width 
     oImg.filters.push(new fabric.Image.filters.Grayscale()) 
     oImg.applyFilters(canvas.renderAll.bind(canvas)) 
     canvas.add(oImg) 
     var img = canvas.toDataURL('image/png') 
     console.log(img) 
     return img 
    }, {crossOrigin: "Anonymous"}) 
} 

在这里，我将grayscale过滤的图像，我想给图像转换成URL。

我得到了完美的网址，但图像的大小是不正确的。 我只得到图像的左上部分，也没有过滤器。

这里可能有什么问题。从文档中我得到了这种应用过滤器的方法。

谢谢

Answer 1

唯一的问题我可以看到是这两行代码：

canvas.setHeight(oImg.height); 
canvas.setWidth(oImg.width); 

我改变了你的例子来渲染结果的图像，看看下面的可运行的代码段：

canvas.height = oImg.height 
canvas.width = oImg.width 

应该是：

canvas.setHeight(oImg.height); 
canvas.setWidth(oImg.width); 

而且，由于applyFilters是异步的，我在回调中移动了你的toDataUrl。

(function filter(url) { 
 
    var c = document.createElement('canvas') 
 
    c.id = "canvas_greyscale" 
 
    var canvas = new fabric.Canvas(c.id) 
 
    fabric.Image.fromURL(url, function(oImg) { 
 
     oImg.width = 100; 
 
     oImg.height = 100; 
 
     canvas.setHeight(oImg.height); 
 
     canvas.setWidth(oImg.width); 
 
     oImg.filters.push(new fabric.Image.filters.Grayscale()) 
 
     oImg.applyFilters(
 
     function(){ 
 
     canvas.add(oImg); 
 
     var img = canvas.toDataURL(); 
 
     $('#myimg')[0].src = img; 
 
     } 
 
    ); 
 
    }, { 
 
     crossOrigin: "Anonymous" 
 
    }) 
 
    })('http://i.imgur.com/fHyEMsl.jpg');

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<img id='myimg' />