CODEWITHSUNDEEP
fabricjs
atallah salah
atallah salah

Reputation: 17

Fabric Js Image blend Filter and change Image src issues

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

Upvotes: 0

Views: 1523

Answers (2)

Daniel Kaye
Daniel Kaye

Reputation: 11

According to this demo, the options for BlendImage are either 'Multiple' or 'Mask'. The options listed in this answer seem to be for BlendColor instead.

Upvotes: 1

Durga
Durga

Reputation: 15604

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>

Upvotes: 4

Related Questions