Javascript: Sending images on the canvas to the server

Hello habrovchane.



I decided to send the image from the canvas to the server.

And what came out of this look under the cut.



So, we need a browser that supports the canvas.



I decided to make it possible with the mouse to draw something on the canvas and send this picture to the server.

')

Go

Canvas

At once I will say that the javascript code will be written in javascript .

I have nothing against libraries, I use them myself. Simply, this is a more general case. If you wish, you can be rewritten under the library.



Create a canvas / canvas (underline the appropriate):

<canvas id="canvas" ...></canvas>





Now we need to make it so that you can draw on canvas.

For drawing, we need to get a 2D mapping context, create a path, move to the starting point,

call the LineTo () method to draw the line to the end point, call the stroke () method to draw the outline, close the path.

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); ctx.closePath(); 

All this can be seen in my code, in the onmousedown, onmouseup and onmousemove handlers.

Send to server

But with the canvas, okay, there are a lot of libraries to work with it. Now how to send pictures to the server.



We need to make an ajax request using the POST method.

Only the picture should be sent not like this:

“Image =% 01% 02% 03 ...”, but as a file.



We need to put the Content-type not “application / x-www-form-urlencoded”, but “multipart / form-data”.

This means that the request body will consist of other subqueries that will themselves have their own headers and bodies.

How the body of such a request looks like can be viewed in LiveHttpHeaders in Firefox by creating an html page with a form

with attribute enctype = "multipart / form-data":







Each such subquery corresponds to a specific form field.

In the picture, I send a form with a text field with name = "id" and a field "file" to send the file.

I am loading the loading.gif file



We need to come up with a boundary separator (boundary) that will separate the request bodies.

In the figure, this delimiter is the string "--------------------------- 12722593819037", this delimiter should separate these

subqueries and should not occur in them.

Before each such subquery there should be a line "-" + boundary, and after all - a line "-" + boundary + "-"



You can read about it here: rfc 1521

About form-data can be read in rfc 1867 .



I note that on 12/19/2010 in Chrome there is already a FormData object for creating form-data, and in Firefox it will only be in 4 versions.



To send the contents of the canvas, we will use the dataURL method, which returns the image as a base64 string.



Example:

 var canvas = document.getElementById('canvas'); var body = canvas.todataURL(); ... xmlhttprequest.open('POST', url); ... xmlhttprequest.setRequestHeader("Content-type", "multipart/form-data; boundary=" + boundary); ... var data =  /*--boundary*/  "--" + boundary + "\n" +    /**/  "Content-Disposition: form-data; name=\"file\"; filename=\"filename\"\n" +  "Content-type: image/png\n\n" +    /**/  body +    /*--boundary--*/  "\n--" + boundary + "--\n"; ... xmlhttprequest.send(data); 

Server part

For emails, you can write a "Content-Transfer-Encoding" header with a value of "base64" to indicate that

that the attached file is encrypted in base64. Unfortunately, I didn’t add such a title to anything.

I had to decode base64 on the server myself.



Only one small “but”, I will say.

When you read a file in slices and decode from base64, you need to read the number of bytes in one multiple of 4.

This is due to base64 encoding. It treats every 3 bytes as a set of 4 6-bit characters, and then each

such a 6-bit character displays as some ordinary 8-bit text character.

(if at the end there is not enough two or one byte, then zero bytes are taken, and in the resulting text you add "=" or "==")



Accordingly, if at one time to read the number of characters not a multiple of 4, then we will not receive pictures (you can check by correcting my code).

Actually, here is the decoding code for a picture in PHP:

 $f = fopen ($filename, 'r') or die('Cannot open file');#   $f2 = fopen ($path . '/' . $name, 'w') or die('Cannot open file');#   $length = 64;//   4! $error = FALSE; while ($content = fread($f, $length)) {  $content = base64_decode($content, TRUE);    if ($content === FALSE) {    $error = TRUE;    break;  }    fwrite($f2, $content); } fclose($f); fclose($f2); 

Actually all this can be viewed on truodkoding.rf / canvas /

On the left there will be a picture, draw something on it, press the “Send” button, the picture is sent to the server,

and then displayed to the right.







Code here: trukoding.rf / canvas / canvas.zip ,

and here: http://www.rapidshare.ru/1709200 ,

and here: http://narod.ru/disk/1762612001/canvas.zip.html



On Yandex sometimes the message “File not found” is skipped, try several times.



Example here: trukoding.rf / canvas /



References:

RFC MIME

form-data

Canvas



Good luck!



upd: Here are some cool images flooded by users: http: //trukoding.rf/cpg/thumbnails.php? album = 1

upd: Similar turns out to be implemented here: http://www.nihilogic.dk/labs/canvas2image/