在overlayImage中应用过滤器的方法在哪里？答案

【问题标题】：Where is a way to apply a filter in the overlayImage?在overlayImage中应用过滤器的方法在哪里？
【发布时间】：2012-11-25 17:36:56
【问题描述】：

我想在 overlayImage 中应用过滤器。唯一的方法是在渲染后在整个画布中应用过滤器？

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案1】：

没有对此的内置支持，但“破解”相当容易。

var overlayImageUrl = '...';

// load overlay image first
fabric.Image.fromURL(overlayImageUrl, function(oImg) {

  // add and apply filter to overlay image 
  oImg.filters.push(new fabric.Image.filters.Grayscale());
  oImg.applyFilters();

  // set <img> element of fabric.Image instance 
  // and assign it directly to canvas' "overlayImage"
  canvas.overlayImage = oImg.getElement();

  // render canvas for overlayImage to appear
  canvas.renderAll();
});

【讨论】：

谢谢！它成功了！比我的解决方案好得多（将一个带有过滤器的新对象放在堆栈顶部并使用 PixelPerfect 检测）。再次感谢。