如何使用带有 React 的 fabricjs 模糊 Canvas 上的图像

Question

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

Answer 1

С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: "",
  }
);