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

Fabric.js blend mode - blended image is black

本文关键字：混合 黑色 图像 模式 js Fabric      更新时间：2023-09-26

我试图在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/，请给我点提示

您遇到async问题。代码正在对图像进行外部请求，并且需要实现一个回调结构。

我不确定你到底想要的图像看起来像什么…但我已经改变了你的代码结构，让它工作。

基于你所拥有的:我们抓取第一个图像，然后将其添加到画布，然后我们抓取第二个图像并对其应用混合过滤器。然后将第二张图像添加到画布中。

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/

相关文章：