How to send HTML data to server

Question

It seems like there are two ways to send <canvas> data to the server. One is to use canvas.getImageData() to get an array of pixels and their 8-bit color values. The other method is to use canvas.toDataURL()) to send a file attachment. This method is demonstrated here.

I want to build a site where people can save their canvas drawings. Which method would be more scalable and faster for my users?

Answer 1

To open your options: Using fabric.js you could serialize your fabric.js canvas to JSON.

Not only does it provide an additional layer of editing capabilities but allows you to do the following (Not to mention being able to edit their images at a later stage) :

var canvas = new fabric.Canvas('c');
canvas.add(
    new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
    new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
    new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })
);

Now when you want to serialize this canvas you simply call the JSON.stringify function on the fabric canvas object;

JSON.stringify(canvas);

Which gives you something like the following for our example above:

{
    "objects": [
        {
            "type": "rect",
            "left": 100,
            "top": 100,
            "width": 50,
            "height": 50,
            "fill": "#f55",
            "overlayFill": null,
            "stroke": null,
            "strokeWidth": 1,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "selectable": true
        },
        ...
    ]
}

---

De serializing the canvas back to its state is reversed by using:

var canvas = new fabric.Canvas('c');
canvas.loadFromJSON(yourJSONString);

---

Some Additional Resources:

Kitchen Sink Demo - View the capabilities of fabric.js (Including free drawing; modifying the size and position of the free drawing afterwards)

Homepage

Answer 2

You can .toDataURL() it

var datastring = document.getElementById('mycanvas').toDataURL("image/png"));

or with jQuery

var datastring = $('#mycanvas')[0].toDataURL("image/png");

And then send that string through to the server via XHR, which should be the quickest.

Answer 3

Try this it works for me in the same case :-

to get json data for whole canvas use JSON.stringify(canvas);

and to load again from json use below code :-

canvas.clear();
canvas.loadFromJSON(json_string,canvas.renderAll.bind(canvas));