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

Fabric.js blend mode - blended image is black(Fabric.js混合模式-混合图像为黑色)

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

本文标题为:Fabric.js混合模式-混合图像为黑色

基础教程推荐