Fabric.js loadFromJSON() method undefined

JavaScript
1

I have wrote this function in a class:

this.loadCanvas = function(json) {
    // parse the data into the canvas
    stage.loadFromJSON(json);

    // re-render the canvas
    stage.renderAll();
}

Where stage is new fabric object.

But in the browser it is showing this error:

Uncaught TypeError: Cannot call method 'loadFromJSON' of undefined

Please tell how can I solve this?

2

Often you get this kind of error when the library your using isn’t loaded, either because there’s a problem loading the script, or your calling code is being executed before the library is loaded.

Are you able to link to the page where you’re having the problem? Or, if it’s not available online, could you post the code here?

3

I am stuck in this problem for two days. I am giving details now.

Link - www.stick-pimping.nl/hockeystick-ontwerper/

  1. You can design using left side tools. Just click on any image.
  2. Click on “Send image to mail”
  3. Image and a link to that image will be send to your email.

Now users should be able to see and edit (add other images/text on the image) the design by clicking the link of the mail.

Problem - I can show the designed image but can’t edit. (some properties are not defined error showing but I think I did it correctly)

Code Details- I have used fancyproductdesigner.js for image manipulation and fabric.js for HTML5 drawing and used internal script in index.php for all my script code.

I added 2 function is fancyproductdesigner.js - 1. saveCanvas 2. loadCanvas

In step-2 I am saving the canvas to DB and in step-3 loading canvas.

As this is a big project and some related files may be needed I can give you ftp access where you can see all files and update and check.

Thanks again.

4

Hi thanks I have solved this loadFromJSON issue. Actually the object is creating a little bit later. I also settimeout of this function more. So I can find this. But now others issues arises. I have posted the problem. See above please. Thanks.

5

Hi,

I’ve taken a look at your site and I can see what you mean about the errors. When I tried to load my design from the email link, it showed me the design I had created but editing it was difficult, and if I tried to view the other side of the hockey stick the stick disappeared and I got some error messages on the console.

It’s difficult to see what’s going on, as the JS file (fabric.js) is minified. It would be easier to debug if you could use an un-minified version for the time being.

6

Thanks for seeing. I am stuck with these problem many days. I may be did not save the canvas image in DB in right way.

Can you please review my save and load sections if I give you the ftp access. Please.

7

It would be better if you could share the relevant sections of your code here, as others will be able to see it and more heads are better than one (and it doesn’t involve giving ftp access to random strangers ;)).

I’ve had a brief look at the Fancy Product Designer api docs… which method are you using to get the data to save? getProduct()?

8

I saved it as json (found it in google).

// save canvas as json
        this.saveCanvas = function() {
            //console.log(stage);
            // convert canvas to a json string
            var json = JSON.stringify(stage.toDatalessJSON());
            //console.log(json);
            return json;
        }
9

I’ve spent quite a while playing around with the JS on your site, but I’m afraid I’m pretty stuck for ideas. I did have limited success using the getProduct/loadProduct functions, but it loses the position of the graphics you add and just puts them in the middle of the canvas for some reason.

Have you tried asking on the Fancy Product Designer support forum? I’m sure others must have tried to do something similar and might be able to point you in the right direction.

10

Thanks. I am trying to reach them.