在overlayImage中应用过滤器的方式在哪里？ [英] Where is a way to apply a filter in the overlayImage?

问题描述

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

I would like to apply a filter in the overlayImage. the only way to do it, is appling the filter in the whole canvas after render?

推荐答案

没有内置的支持，但很容易黑客。

There's no built-in support for this, but it's fairly easy to "hack".

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

这篇关于在overlayImage中应用过滤器的方式在哪里？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！