javascript - Why isnt the old background being overwriten? -
i have canvas background image i'm filtering to gray scale. when save canvas json want background's image filter removed. how come when overwrite canvas background setter method filtered background remains in json?
applying filtering background
fabric.image.fromurl(image_library_selected_url, (function(image){ image.filters[0] = grayscale; image.applyfilters((function(){ this.canvas.backgroundimage = image.getelement(); canvas.backgroundimage.name = image_library_selected_url; this.canvas.renderall(); }).bind(this)); }).bind(this));
removing filtering , converting canvas json
//canvas.backgroundimage.name holds src of original image var bg_img = canvas.backgroundimage.name; canvas.setbackgroundimage(bg_img, canvas.renderall.bind(canvas)); canvas.foreachobject(function(obj) { if (obj.type === 'named-image') { obj.filters=[]; obj.applyfilters(canvas.renderall.bind(canvas)); } }); canvas.deactivateall().renderall(); var data = json.stringify(canvas);
at point data goes off database , nonfiltered background image remains on screen...
when refresh page saved data reloaded page except filter (of background) remains. if clear background entirely with:
canvas.setbackgroundimage('', canvas.renderall.bind(canvas))
the background data erased expected , never saved.
if do:
//canvas.backgroundimage.name holds src of original image var bg_img = canvas.backgroundimage.name; canvas.setbackgroundimage('', canvas.renderall.bind(canvas)); canvas.setbackgroundimage(bg_img, canvas.renderall.bind(canvas));
visually background appears correct no background data saved
turns out unfiltered background wasnt loading fast enough , call wasn't made in time.
//canvas.backgroundimage.name holds src of original image var bg_img = canvas.backgroundimage.name; canvas.setbackgroundimage(bg_img, function() { canvas.renderall(); ...other processing var data = json.stringify(canvas); ...process json data });