Soy nuevo en fabricjs, he estado tratando de desenfocar una imagen usando un control deslizante HTML (rango de 0 a 1). La imagen ya se ha cargado en el lienzo. Pero al aplicar el efecto de desenfoque usando matrices de filtros, no veo ningún cambio visible.

Estoy usando un componente de desenfoque controlado en React de la siguiente manera:

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

la función del controlador onChange es la siguiente:

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

El mismo enfoque funciona si configuro la opacidad en la imagen, como:

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

Pero, hasta donde yo sé, el desenfoque tiene que estar dentro de la matriz de filtros, así que he intentado hacer lo mismo, pero no funciona en absoluto.

Algunas observaciones:

1. Incluso después de hacer editor.canvas.renderAll() , creo que editor?.canvas?.getActiveObject()?.applyFilters() es necesario para aplicar la propiedad de desenfoque. Pero si elimino el comentario de esa línea del código anterior, aparece el siguiente error "filter.isNeutralState no es una función". Mientras esa línea se mantiene comentada, no veo ningún error ni ningún cambio.

2. Encontré este enlace codepen , donde el autor está literalmente haciendo lo mismo, pero no estoy seguro de qué estoy haciendo mal en mi caso.

¿Mi editor?.canvas?.getActiveObject()