-1

I have a script that generates about 250 images from canvas.toDataURL(). My question is how to save them all at once (one request to server) instead of posting them individually.

I need a way to pack them in single request and then send them to PHP server for unpacking.

Laurel
  • 5,965
  • 14
  • 31
  • 57
Luchezar
  • 164
  • 1
  • 13

1 Answers1

0

canvas.toDataURL() gives the byte data encoded in base64, they are safe to be used as strings and passed through HTTP.

do something like:

var images = [];
while(....) {
    images.push(canvas.toDataURL());
}
var imagesJson = JSON.stringify(images);
// pseudo code of jQuery ajax, you can make use of form and a hidden field 
// or any other way you'd like to query the server
$.ajax({
....
send:{images:imagesJson}
....
});

with PHP (other server side languages should almost be the same):

$images = json_decode($_POST['images'], true);
foreach($images as $image) {
    $image = base64_decode($image);
    file_put_contents('<path to file>', $image);
}
TwilightSun
  • 2,275
  • 2
  • 18
  • 27
  • @TwilightSun: Easy to say, harder to configure and get it working! In your PHP example, with 250 photos the questioner will run into default upload_max_filesize and post_max_size limitations unless the images are about 90x90px sized. Also, they will likely hit the default max_execution_time limit. PHP will fail silently (aggravatingly) if these configurations--and others, are not correct. – markE Jan 06 '14 at 18:32
  • @markE Will then, considering these, all I can think of is using web sockets instead of POST, but then I would prefer multiple POST queries than to web socket. – TwilightSun Jan 07 '14 at 01:02
  • Not at all...the answer is going in the right direction. IMHO, when explaining network operations to someone with <100 reputation you might want to include more rather than less info about the full setup. – markE Jan 07 '14 at 03:16
  • Hi guys. I was going to ask what's the best way to upload the images to the server but @markE has already started the discussion. The images are with size 320x240 and sometimes the script gives php error or error 500. I think of nodejs and socket.io but I think that this will mot be the best choice because the integration between the site and the socket.io server will be hard. – Luchezar Jan 08 '14 at 14:27
  • @semprom Why do you want to do the upload in one request in the first place? – TwilightSun Jan 08 '14 at 15:14
  • Because if I send every image individually there will be too many request to the server. – Luchezar Jan 08 '14 at 15:42
  • @semprom when doing data transfering at this large scale I don't think breaking up to multiple queries will cause any critical overhead or preasure on the server. The fallback of socket.io when websocket is not available is doing multiple HTTP requests anyway. – TwilightSun Jan 09 '14 at 00:46
  • How can I break it into multiple queries? For example 50 images a query. By the way can't this work with upload. To upload the data to the sever, not posting it as string. – Luchezar Jan 10 '14 at 13:04
  • @semprom to do upload see the question: http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax but I don't think this will work for all browsers. For breaking to multiple queries, just make an array, and send and empty the array every time the array size up to 50. – TwilightSun Jan 11 '14 at 02:50