Image Not Movable on Canvas After Loaded from JSON
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi, I have a canvas (w/ fabricjs 1.7.22) that has an image (which should remain unmovable), a button that adds an image from your computer (behind the unmovable image), among other functions. My issue is that the image uploaded from your computer is not movable after I save the canvas as JSON then load that same JSON back to the canvas. I can select the image, and resize it, but not move it.

The only time that it is movable after I load the JSON to the canvas is when I add an image from the web (see: Add Web IMG in JSFiddle). When I remove the sendToBack from the uploaded image function, it seems to work, but I need that image to be put behind the unmovable image on-upload so am not sure what to do.

Here is my JSFiddle: https://jsfiddle.net/code4ever/4zk7uznm/. To reproduce the issue, add an image from your computer, click 2JSON, and click 2CANVAS. The image you uploaded shouldn’t be movable, unless you group it from Add Web IMG.

I’ve been banging my head on this one. I feel like I'm missing something right in front of me, haha. I look forward to seeing any of you might tackle it. Thanks.

awarded to kostasx

Crowdsource coding tasks.

1 Solution

Winning solution

I've made some changes and posted the jsfiddle: https://jsfiddle.net/kostasx/qtk9je8v/
As you can see, I've added a excludeFromExport property set on the default image and load it again when the JSON has been updated.

This looks great. I'm going to try and implement this. I may return for some follow-up, if you don't mind me asking, for additional tips? Thanks
sharper 7 months ago
What's strange is that it works with just the JSON but not with the file (when using the JSON text file, the image disappears)
sharper 7 months ago
Thanks for the tip. I will take a look at it, first thing tomorrow.
kostasx 7 months ago
You are welcome, cheers.
sharper 7 months ago
Yes, this is the workaround. The function loadDefaultFrame() takes care of enabling the default image. The default image is not being exported in the JSON file.
kostasx 7 months ago
Is there a way to get the same result as with the JSON field? I mean, is there a way to export the image with it, or the image source path with it, so that it doesn't load without it? Willing to tip for working solution. Thanks!
sharper 6 months ago