javascript - overlayImage でフィルタを適用する方法はどこにありますか?

Question

overlayImage にフィルターを適用したいと思います。それを行う唯一の方法は、レンダリング後にキャンバス全体にフィルターを適用することですか?

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