gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:42:25 25 4
gpt4 key购买 nike

我正在尝试在 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'
});

这是我的 fiddle :http://jsfiddle.net/mikado/5Lg7nos6/1/ ,请提示我。

最佳答案

您遇到了异步 问题。该代码正在对图像进行外部请求,并且需要实现回调结构。

我不确定您究竟希望图像看起来像什么...但我已经更改了您的代码结构以使其正常工作。

根据您所拥有的:我们抓取第一张图像,然后将其添加到 Canvas ,然后我们抓取第二张图像并对其应用混合滤镜。然后我们将第二张图片添加到 Canvas 。

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

这是 fiddle :https://jsfiddle.net/5Lg7nos6/2/

关于javascript - Fabric.js 混合模式 - 混合图像为黑色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33323966/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com