当我尝试在FabricJS中更改图像src时工作正常,但在向该图像添加过滤器(混合图像)后,更改src无法正常工作:
更改图片src代码:
function replaceImage(imgLink) {
fabric.Image.fromURL(imgLink, function(img) {
var object = canvas.getActiveObject();
object._element.src = imgLink;
canvas.renderAll();
});
}
添加过滤器代码:
filter2 = new fabric.Image.filters.BlendImage({
image: mainObject,
mode: 'mask',
alpha: 0.5
});
let object = canvas.getActiveObject();
object.filters.push(filter2);
object.applyFilters();
canvas.renderAll();
答案 0 :(得分:0)
使用imageObj#setSrc更改图像对象的来源。 Authorization
模式可用的选项是BlendImage
之一。
演示
multiply, add, diff, screen, subtract, darken, lighten, overlay, exclusion, tint
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
width: 300,
height: 300
});
var imageObject;
fabric.Image.fromURL('https://picsum.photos/200/200', function(img) {
img.set({width:200,height:200,scaleX:1,scaleY:1})
imageObject = img;
canvas.add(img);
},{crossOrigin:'annonymous'});
var i=0;
function addFilter(){
filter2 = new fabric.Image.filters.BlendImage({
image: imageObject,
mode: 'multiply',
alpha: 0.5
});
imageObject.filters.push(filter2);
imageObject.applyFilters();
canvas.requestRenderAll();
}
function changeSrc(){
var url = 'https://picsum.photos/200/200?random='+ ++i;
imageObject.setSrc(url,function(){
canvas.requestRenderAll();
},{crossOrigin:'annonymous'})
}
canvas{
border:1px solid;
}