How can I blur an image on Canvas using fabricjs with React

user_10900875 0
Viewed 82

I'm new to fabricjs, I've been trying to blur an image using a HTML slider(range from 0 - 1). The image has already been loaded on the canvas. But while applying the blur effect using Filters arrays, I don't see any visible change.

I'm using a controlled blur component in React as follows :


<div>
  Blur
    <input
      id="blur"
      type="range"
      min="0"
      max="1"
      step="0.1"
      value={editor?.canvas?.getActiveObject()?.filters?.slice(-1)[0]?.blur || 0}
      onChange={(e) => handleChangeSlider("blur", e?.target?.value)}
      ></input>
   <span>{editor?.canvas?.getActiveObject()?.filters.slice(-1)[0]?.blur || 0}</span>
 </div>

the onChange handler function is as follows :

function handleChangeSlider(){
setBlur(value)
editor?.canvas?.getActiveObject()?.filters?.push({
        blur: 0.5,
        horizontal: false,
        aspectRatio: 1,
      })
// editor?.canvas?.getActiveObject()?.applyFilters()
}
editor.canvas.renderAll()
}

The same approach works if I'm setting opacity on the image, like:

editor.canvas.getActiveObject().set({ opacity: value })

But, as far as I know, the Blur has to be inside the filters array, So I've tried doing the same, but it is not working at all.

Some Observations :

  1. Even after doing the editor.canvas.renderAll() , I think editor?.canvas?.getActiveObject()?.applyFilters() is necessary to apply the blur property. But if I uncomment that line from above code, i get the following error "filter.isNeutralState is not a function" . While that line being kept commented, I don't see any error or any change.

  2. I found this codepen link, where the author is literally doing the same, But I'm not sure what I'm doing wrong in my case.

My editor?.canvas?.getActiveObject() enter image description here

enter image description here

fabricjs reactjs canvas html javascript
1 Answers

Сreate a filter like this:

new fabric.Image.filters.Blur({
  blur: 0.5,
  horizontal: false,
  aspectRatio: 1,
});

In order to solve the cross-origin issue use the additional parameter:

fabric.Image.fromURL(
  activeDragDropItem.src,
  function (oImg) {
    oImg.scale(0.2);
    oImg.top = e.nativeEvent.layerY;
    oImg.left = e.nativeEvent.layerX;
    editor.canvas.add(oImg);
  },
  {
    crossOrigin: "",
  }
);
user_49802150
Related