• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

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

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

С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: "",
  }
);
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error