React中使用Fabric.js为Canvas图片添加模糊效果失效问题

问题背景 #

我是Fabric.js新手，想用HTML滑块（范围0-1）给Canvas上已加载的图片加模糊效果，但通过Filters数组应用后完全看不到变化。设置图片透明度的类似逻辑能正常工作，唯独模糊效果没反应。

代码实现 #

受控模糊滑块组件 #

<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)}
  />
  <span>{editor?.canvas?.getActiveObject()?.filters.slice(-1)[0]?.blur || 0}</span>
</div>

滑块变更处理函数 #

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

正常工作的透明度设置代码 #

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

具体问题点 #

• 调用editor.canvas.renderAll()后无任何视觉变化；尝试取消注释applyFilters()时，会报错“filter.isNeutralState is not a function”，注释该行则无报错也无效果。
• 参考过操作逻辑类似的示例，但找不到自己的错误所在。

相关对象详情截图 #

内容的提问来源于stack exchange，提问作者anshul