Fabric.js - 模糊滤镜使剪裁图像上的黑色边框/发光答案

【问题标题】：Fabric.js - Blur filter makes dark border / glow on clipped imagesFabric.js - 模糊滤镜使剪裁图像上的黑色边框/发光
【发布时间】：2021-09-24 17:06:57
【问题描述】：

当我对带有透明 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 = 剪切图像

【问题讨论】：

标签： fabricjs

【解决方案1】：

我找到了解决此问题的方法。覆盖 toCanvasElement 方法 (http://fabricjs.com/docs/fabric.js.html#line15767) 并填充画布将 ffffff01 而不是保持完全透明。

它为我解决了问题。

【讨论】：