javascript 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) { 
     c.height = oImg.height 
     c.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"}) 
} 

此處我的畫布使用灰度過濾器呈現。它沒有問題，但是當我嘗試將canvas轉換爲url時，它會給我沒有過濾器的畫布。

我不知道這裏有什麼問題..

我在做什麼錯。我想有過濾器，網址

var img = canvas.toDataURL('image/png')讓我像不帶過濾器

畫布轉換

需要幫助

Answer 1

applyFilters是異步的（這就是爲什麼你在它傳遞一個renderAll回調）。
您需要在回調函數中調用toDataURL，否則在應用過濾器之前導出畫布。

這裏是你的代碼的一個粗略的改編：

function filter(url, callback) { 
 
    var c = document.createElement('canvas'); 
 
    c.id = "canvas_greyscale"; 
 
    var canvas = new fabric.Canvas('canvas_greyscale'); 
 
    // the applyFilters' callback 
 
    var onend = function() { 
 
    canvas.renderAll(); 
 
    var img = canvas.toDataURL('image/png'); 
 
    callback(img); 
 
    } 
 

 
    fabric.Image.fromURL(url, function(oImg) { 
 
    canvas.setDimensions({width:oImg.width, height:oImg.height}); 
 

 
    oImg.filters.push(new fabric.Image.filters.Grayscale()) 
 
    // here we pass the export function 
 
    oImg.applyFilters(onend) 
 
    
 
    canvas.add(oImg) 
 
    }, { 
 
    crossOrigin: "Anonymous" 
 
    }) 
 
} 
 

 
var url = 'https://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg' 
 
filter(url, function(dataURI) { 
 
    output.src = dataURI; 
 
    original.src = url 
 
})

img{ width: 50%}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.js"></script> 
 
<img id="output"><br> 
 
original Image: © Andrew Dunn CC-By-SA 2.0 <br> 
 
<img id="original">