5

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?

Improve this question

3 Answers 3

Reset to default
5

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Would this method be efficient if I allowed my users to "doodle" with a marker or pen tool? I imagine that the JSON array would have to be huge to contain all that data. Which approach would you recommend as more scalable/efficient in that case?
Depends really if you need to edit the "doodle" at a later stage, if so then that would probably suit your needs completely; if not the static image would most likely be better. I'll run a few tests in the morning and get back to you. ;)
Awesome. People would be able to go back and edit their images. I figured that the actual PNG format would be more efficient than a JSON, but maybe I'm wrong
@babonk A relatively simple doodle is about 600 lines worth of JSON. For shapes it's considerably less. If you need to edit the doodle later I don't know of a way different than using this method. PNG would only suit you if you didnt need to edit the image. HTH :)
I see. There might be a way to pull it off (by reading pixel data after loading in a PNG), but the JSON method does seem to be easier for the case where editing occurs later. Granting you the answer. Also, thanks for the pointer to Fabric.
4

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.

Improve this answer

2 Comments

I don't think you can access toDataURL directly from the jQuery element. Use $('#mycanvas')[0].toDataURL() to get the corresponding DOM node.
Thanks.. This method definitely works well when editing later isn't required.
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));
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.