Question

I have used HTML 5 canvas for drawing something on it using javascript after i have done with drawing i have to save that canvas in hard disk. I can obtain the image src by using the following method:

var img = canvas.toDataURL();

after this the img variable contains something like the following value

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAABkCAYAAABwx8J9AAAP/UlEQVR4Xu2dX4wV1R3HZwSCkbWIRpA+UMqfatwArqyKVSMUbENbGx8KafvQxDaRYKMvbdPyxPWlaNK+1FSDD/WptsEXUkWaytY1aK2y65YlS1SQrDR2Xa2KZTEQwNvvb51LLtvdvXPnnjt/znxucjJ3984553c+5zfznd+cM2fCgA8EIAABCEAAAoUnEB…………

I can use this image src like

<img id=myimage" src=img />

and the image gets displayed perfectly in a web browser.

What i want to do is save this image on the hard disk. Is there any way to save it with PHP or javascript.

Any help will be appreciated.

Answer 1

For PHP >=5.2.0, you can use the data:// stream wrapper:

file_put_contents("file.png",file_get_contents("data://".$var_containing_the_data_uri));

where $var_containing_the_data_uri should be replaced by the variable containing the data URI, for example $_POST['image'].

You could send the data using AJAX post. If you use GET method beware of the URL length limit.

Or if you want to let the clients download/save the image, just create an <img> element with the data URI src and tell the client to Right-click and save it. You can also refer to the link that @Kode-Plus stated.