过滤背景

Question

如何在fabric.js中的背景图片中插入滤镜？

  function backchange(img)
    {   
        var imag = img.src;  
    canvas.setBackgroundImage(imag, canvas.renderAll.bind(canvas), {
      width: canvas.width,
      height: canvas.height,
      // Needed to position backgroundImage at 0/0
      originX: 'left',
      originY: 'top'
    });
    }

我可以在图片中添加过滤器，但是如何将过滤器放在不可选择的图像背景上？

感谢您的帮助

Answer 1

编写回调，以替换canvas.renderAll.bind(canvas)，并参考canvas.backgroundImage向图片添加过滤器。

  function backchange(img) {   
      var imag = img.src;  
      canvas.setBackgroundImage(
        imag,
        function() {
          canvas.backgroundImage.filters.push(new fabric.Image.Filters....);
          canvas.backgroundImage.applyFilters();
          canvas.renderAll();
        },
        {
          width: canvas.width,
          height: canvas.height,
          // Needed to position backgroundImage at 0/0
          originX: 'left',
          originY: 'top'
        }
     );
  }

Answer 2

以此为基础：http://fabricjs.com/image-filters

您可以通过这种方式定位背景（仅基于：function applyFilter）并在背景上设置棕褐色。

obj = canvas.backgroundImage;
obj.filters[3] = new f.Sepia();
obj.applyFilters(canvas.renderAll.bind(canvas));