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