Fabric Js Image blend Filter and change Image src issues

Question

When I'm trying to change image src in FabricJS works fine but after add filter (blend image) to that image change src not working :

Change image src code :

function replaceImage(imgLink) {  
  fabric.Image.fromURL(imgLink, function(img) {
    var object = canvas.getActiveObject();
    object._element.src = imgLink;
    canvas.renderAll();
  });
}

add filter code :

   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();

Answer 1

Use imageObj#setSrc to change the source of image object. and options available for BlendImage modes are multiply, add, diff, screen, subtract, darken, lighten, overlay, exclusion, tint one of them.

DEMO

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>
<button onclick='changeSrc()'>changeSrc</button>
<button onclick='addFilter()'>addFilter</button><br>
<canvas id="editorCanvas"></canvas>