Fabric.js blend mode - mixed image in black

Question

I am trying to use the blend filter in the fabric.js file and cannot determine what I am doing wrong: the image on which the filter is applied becomes black

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'
});

Here is my fiddle: http://jsfiddle.net/mikado/5Lg7nos6/1/ , please tell me.

Answer 1

You have encountered async problems . The code makes external requests for images, and the callback structure must be implemented.

I'm not sure what exactly you want the image to look like ... but I changed the structure of your code to make it work.

, : , , . .

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: ''});

heres the : https://jsfiddle.net/5Lg7nos6/2/