Блог

Главная - Вопросы по программированию - Фильтр смешивания изображений Fabric Js и проблемы с изменением src изображения

Фильтр смешивания изображений Fabric Js и проблемы с изменением src изображения

#fabricjs

#fabricjs

Вопрос:

Когда я пытаюсь изменить src изображения в FabricJS, он работает нормально, но после добавления фильтра (смешивания изображения) к этому изменению изображения 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();

Ответ №1:

Используйте imageObj#setSrc для изменения источника объекта изображения. и опции, доступные для 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;
}  
 <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>