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' />