Sketch with JS

Question

It's hard for me to think about it through

Let's say you have a sketch application built using JS. For example: http://intridea.github.com/sketch.js/

And you want to save the user's drawing after he drew something. So whenever someone visits the site, he downloads all the previous drawings. This falsifies the real-time multi-user drawing a bit, because making it really real-time is not an option at the moment.

Server work I work with PHP and MySQL, I do not know if this is good for this.

Thank.

Answer 1

In the canvas that you apply “sketch.js” to (using $('#myCanvas').sketch() ), there is a function called toDataURL() (in the HTML element, not the jQuery element). You can upload the data returned by this function to your server.

 $('#upload').click(function () { $.post('/upload_image.php', { data: $('#myCanvas').get(0).toDataURL() }, function () { alert('uploaded'); }); }); 

You can restore the canvas by uploading the data sent to your server. See here: http://www.html5canvastutorials.com/advanced/html5-canvas-load-image-data-url/ .

Answer 2

There are a number of complex problems to solve such a project. I recently developed a multi-user canvas-based drawing application using PHP and MySQL for the backend. Some of the most important ideas:

JS does not have the ability to poll mouse coordinates with the resolution that you really need for an ideal drawing application. For an easy, fun sketch, you can get away from it. However, emulating Photoshop quality is not possible. This question mainly leads to the faces of sketch lines. You can see this a bit in the example you are attached to, but it is too obvious if you do not use your own line drawing functions and use personalized stamp forms instead.

Loading the state of a user's canvas is possible using the Jan Jongboom method, but this is not without problems. Consider this scenario: user1 and user2 connect to the application at the same time and are welcomed with a blank canvas. user1 draws a big red, filled circle, and then user2 draws a big blue, filled triangle. From an external observer, user1 first gained their form, and user2 took second place. In a fairly likely scenario, suppose that the drawing user2 completed by uploading to user1 to user1 due to network latency. Your server will incorrectly save the state of user1 on top of user2 . This is a fairly simplified version of the problem, but it is a serious problem, because the system is scalable and several people draw at the same time. People will draw each other, and the state of the canvas will be different for each local user.

Another issue to consider is that loading canvas data after each action does not scale with the resolution of the canvas at all. If you are developing something that should work at full-screen resolution, downloading (for example) a 1680x1050 image after each action is definitely inefficient. Instead, you should look at conveying the information needed to re-create user actions. This is a much better approach (i.e. draw a blue circle with a radius of 9px in [4,6]). It is also better suited for organizing a database.

One of the options that I had been entertaining for a while was that PHP updated the server-side image on the canvas, on which everyone was drawing. As the updates are received by the server, PHP will load the same resources that are used locally by users and will perform the same actions with the drawings. Then, when the new user connected, they simply grabbed the last image on the server side and processed any additional updates locally to catch up with everyone else. Unfortunately, this did not scale at all, since all the image functions in PHP are processor-based, and when you work with things like changing the brush size, rotation, transparency and spacing, it is just too long for the update to cost.

In addition to the quality of the line, the biggest problem you will encounter is the synchronization of all users. For your purposes, this may not be a problem at all, but if you are aiming to implement multi-user Photoshop in a browser, this is a pretty large ticket element.

If you have other questions about this or specific ideas / approaches, feel free to ask.

Answer 3

If you still want to edit the drawing, you will have a problem with the toDataURL approach.

I recently implemented sketch.js with a different saving approach and canceling / repeating functions.

I answered the question of this question on Github.

My full implementation, incl. cancel / redo

 # this is what I save via AJAX dataURL: -> JSON.stringify(@getSketch().actions) load: (id) -> $.ajax "#{@getContainer().data("target-url")}/#{id}.json", success: (data, status, xhr) => sketch = @getSketch() $.each data.json_data, -> sketch.actions.push(this) sketch.redraw() error: (xhr, status, msg) => alert("Failed to load sketch! #{xhr.status}: #{msg}") 

This is CoffeeScript , you can convert it to JS if you prefer it, but it gets a little cryptic.