如何将滤镜应用于Fabric.js中的画布背景图像

Question

很抱歉，如果有人问同样的问题。 我找不到任何方法将过滤器应用于canvas backgroundImage。

我尝试做类似这样的事情：https://stackoverflow.com/a/13541734/1777335

我的代码：

setBackground: function () {
    fabric.Image.fromURL(this.model.get('background'), (function(image){
      this.canvas.setWidth(image.width);
      this.canvas.setHeight(image.height);
      image.filters.push(new fabric.Image.filters.Grayscale());
      image.applyFilters();
      console.log(image);
      this.canvas.backgroundImage = image.getElement();
      this.canvas.renderAll();
    }).bind(this));
  }

我也尝试这样做：

setBackground: function () {    
    this.canvas.setBackgroundImage(this.model.get('background'), (function () {
      this.canvas.backgroundImage();
      this.canvas.setWidth(this.canvas.backgroundImage.naturalWidth);
      this.canvas.setHeight(this.canvas.backgroundImage.naturalHeight);
      this.canvas.backgroundImage.filters = [new fabric.Image.filters.Grayscale()];
      this.canvas.backgroundImage.applyFilters((function(){
        this.canvas.renderAll();
      }).bind(this));
    }).bind(this));
  }

但一切都没有改变。 你能帮我解决这个问题吗？

感谢。

解决！ 我是菜鸟:) 代码几乎是正确的，但我忘记了javascript的异步性。

setBackground: function () {
    fabric.Image.fromURL(this.model.get('background'), (function(image){
      this.canvas.setWidth(image.width);
      this.canvas.setHeight(image.height);
      image.filters.push(new fabric.Image.filters.Grayscale(30));
      image.filters.push(new fabric.Image.filters.Brightness(90));
      image.applyFilters((function(){
        this.canvas.backgroundImage = image.getElement();
        this.canvas.renderAll();
      }).bind(this));
    }).bind(this));
  }