Javascript 在叠加图像中应用过滤器的方法在哪里？

我想在叠加图像中应用一个过滤器。唯一的方法是在渲染后在整个画布中应用过滤器

对此没有内置支持，但“黑客”相当容易

var overlayImageUrl='…'；
//首先加载覆盖图像
fabric.Image.fromURL（覆盖图像URL，函数（oImg）{
//向覆盖图像添加并应用过滤器
oImg.filters.push（newfabric.Image.filters.Grayscale（））；
oImg.applyFilters（）；
//设置fabric.Image实例的元素
//并将其直接指定给画布的“覆盖图像”
canvas.overlayImage=oImg.getElement（）；
//渲染画布以显示覆盖图像
canvas.renderAll（）；
});

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

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();
});