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

问题描述

我正在尝试使用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/，请给我提示一下。

推荐答案

您遇到了异步问题。代码正在向外部请求图像，需要实现一个回调结构。

我不确定您到底希望图像是什么样子...但我已经更改了您的代码的结构以使其正常工作。

基于您已有的内容：我们获取第一个图像，然后将其添加到画布，然后获取第二个图像并对其应用混合滤镜。然后，我们将第二个图像添加到画布。

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混合模式-混合图像为黑色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！