Fabric.js混合模式 - 混合圖像是黑色

Question

我想在fabric.js中使用混合過濾器，並且無法識別我在做什麼錯誤：應用過濾器的圖像變成黑色

var canvas = new fabric.Canvas('c1'); 

var bgImg = fabric.Image.fromURL('url', function (oImg) { 
    canvas.add(oImg); 
}, { 
    crossOrigin: 'Anonymous' 
}); 

var blendImg = fabric.Image.fromURL('url', function (oImg) { 
    var filter = new fabric.Image.filters.Blend({ 
     image: bgImg, 
     mode: 'multiply', 
     alpha:0.5 
    }); 
    oImg.filters.push(filter); 
    oImg.applyFilters(canvas.renderAll.bind(canvas)); 
    canvas.add(oImg); 
}, { 
    crossOrigin: 'Anonymous' 
}); 

這是我的小提琴：http://jsfiddle.net/mikado/5Lg7nos6/1/，請給我一點提示。

Answer 1

您遇到異步問題。代碼正在對圖像進行外部請求，並且需要實現回調結構。

我不確定你想要什麼圖像看起來像......但我已經改變了你的代碼的結構來使它工作。

根據您所得到的：我們抓住第一張圖片，然後將其添加到畫布上，然後我們抓住第二張圖片並應用混合濾鏡。然後我們將第二個圖像添加到畫布上。

var canvas = new fabric.Canvas('c1'); 

fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/c/c6/Grey_Tshirt.jpg', function(oImg) { 

    canvas.add(oImg); 

    var filter = new fabric.Image.filters.Blend({ 
     image: oImg, 
     mode: 'multiply', 
     alpha: 0.3 
    }); 

    fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg', function(zImg) { 

     zImg.filters.push(filter); 
     zImg.applyFilters(canvas.renderAll.bind(canvas)); 

     canvas.add(zImg); 

    },{crossOrigin: ''}); 


},{crossOrigin: ''}); 

繼承人的小提琴：https://jsfiddle.net/5Lg7nos6/2/