Как применить фильтр к холсту 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));
}