本文介绍了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混合模式-混合图像为黑色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!