Fabric.js-模糊滤镜使黑色边框/在裁切后的图像上发光

Question

当我在具有透明PNG的fabric.Image对象上使用模糊滤镜时，它看起来还不错。但是，当我在fabric.Image对象上使用clipPath，然后使用toDataURL（）或cloneAsImage（）制作透明PNG，然后对其进行模糊处理时，它会发出奇怪的暗光。知道如何摆脱它吗？

class Board {
  constructor(id) {
    this.canvas = new fabric.Canvas(id)
    this.filter = new fabric.Image.filters.Blur({
      blur: 0.5
    })
  }
  addImage(url) {
    fabric.Image.fromURL(url, (img) => {
      this.image = img
      this.canvas.setWidth(img.width)
      this.canvas.setHeight(img.height)
      this.canvas.add(img)
    })
  }
  addBlur() { // OK
    this.blurImage(this.image)
  }
  addClipAndBlur() { // Not OK
    const circle = new fabric.Circle({
      radius: 100,
      fill: 'red',
      left: 150,
      top: 150,
      originX: 'center',
      originY: 'center',
      absolutePositioned: true
    })
    this.image.clipPath = circle
    this.canvas.remove(this.image)
    this.image.cloneAsImage((image) => {
      this.canvas.add(image)
      this.blurImage(image)
    })
  }
  blurImage(image) {
    image.filters.push(this.filter)
    image.applyFilters()
    this.canvas.renderAll()
  }
}

请参见https://codepen.io/ultradeq/pen/RwbXZKm?editors=0010 board1 =透明PNG，board2 =剪切的图像