technology04 Jan 2007 01:36 pm
I’ve been asked for the source of save.php, which handles saving an image to the server.
In JavaScript, the data url of the canvas is posted to save.php over AJAX. (As an aside, this is the single usage of Ajax in CanvasPaint, so it really doesn’t deserve to be that prominent of a tag for the site on del.icio.us…)
req.open("POST", "save.php", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("u="+canvas.toDataURL());
In PHP, base64_decode() does all the magic:
$dataurl = str_replace(" ", "+", $_POST["u"]);
$data = substr($dataurl, strpos($dataurl, “,”));
$file = fopen(”image.png”, “wb”);
fwrite($file, base64_decode($data));
fclose($file);
Add a couple of security checks (mimetype, data url length, evil hax0ring attempts…) and filename generation, and you’re done.
January 18th, 2007 at 12:0
Great stuff!
Though perhaps you should mention that you have to echo back “image.png” (or whatever the filename is).
e.g.
…
fclose($file);
echo ‘image.png’;
August 19th, 2007 at 23:1
Thank you very much –this has saved me hours of frustration.
-Ryan
January 15th, 2008 at 13:0
Hello there.
I’m trying to code a simple save function for my project based on canvas, and I have a problem. When I use the method presented in the post, I get an error from my apache, that the url is too long… and it is quite long. I’ve decided to have the save function inside the main php file, I’ve used sajax to do the saving part, but still, the data is too big to get there. I’m using a 300×300 canvas, would any of you have an advice for me?
January 15th, 2008 at 14:0
“URL too long” sounds like you’re submitting the data with a GET request (= a URL parameter), and not a POST request like in the example above (= as the body of an HTTP request). POST should not have a maximum length, or at least not one you will be likely to hit — that’s how files are uploaded, for example.
So make sure when you call sajax, you’re specifying POST as the method.
January 15th, 2008 at 16:0
Ah, thank you very much c3o, I forgot to change the request type, silly me :)
September 23rd, 2008 at 17:1
“Add a couple of security checks (mimetype, data url length, evil hax0ring attempts…) and filename generation, and you’re done.”
What about this, could you explain please how to secure the script? What security vulnerability you see here?
June 9th, 2009 at 14:1
I was wondering:
(1) if http://canvaspaint.org/ is open source —
I would like to use it for my JS drawing
programs
(2) What security measures do you advise one use
with the In PHP, base64_decode() and how do
you do them.
Email reply is welcome
March 27th, 2010 at 17:1
Hi,
I’m having a problem.
I was using imagecreatefromstring on the php side, to create an image resource for thumbnailing/saving it. Writing directly to a PNG is way better because imagecreatefromstring is slow.
But I’m still having a problem when the posted image dataurl is too long. 640×480 images are posted correctly, 854×480 images result in a 0-byte PNG file.
Any idea?
June 8th, 2010 at 15:1
Hi,
Don’t know if this blog is updated, but can anyone show me how to save the image to the server in c# or translate the php to c#?
$dataurl = str_replace(” “, “+”, $_POST["u"]);
$data = substr($dataurl, strpos($dataurl, “,”));
$file = fopen(”image.png”, “wb”);
fwrite($file, base64_decode($data));
fclose($file);