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/

Fabric.js混合模式 - 混合图像为黑色

1 个答案: