Как применить фильтр к холсту backgroundImage в Fabric.js

Извините, если кто-то задал тот же вопрос. Я могу'Не найти способ применить фильтр к холсту 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));
  }

Но ничего не изменилось. Можете ли вы помочь мне в этом вопросе?

Благодарю.

Решено! Я'm noob :) Код был почти правильный, но я забыл об асинхронной природе 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));
  }

Ответы на вопрос(0)

Ваш ответ на вопрос