Grabbing each frame of an HTML5 canvas

Question

These palette cycle images are breathtaking: http://www.effectgames.com/demos/canvascycle/?sound=0

I\'d like to make some (or all) of these into desktop backgrounds.

Answer 1

EDIT: Finally put that code to use, here's the result:

Imagick generated a large image, so I went ahead and optimized with gimp.

The client-side code is a modified version of Michael's code:

var canvas = document.getElementById("mycanvas");
var shots  = [];
var grabLimit = 30;  // Number of screenshots to take
var grabRate  = 100; // Miliseconds. 500 = half a second

var count     = 0;

function postResults() {
   console.log("START---------");
   for (var i = 0; i < shots.length; i++) {
      document.write(shots[i]+"
");
   }    
   console.log("END-----------");
}

var grabber = setInterval(function(){
  count++;

  if (count>grabLimit) {
    clearInterval(grabber);
    postResults();
  }

  var img     = canvas.toDataURL("image/png");
  shots.push(img.replace("data:image/png;base64,",""));
}, grabRate);

It will write a bunch of base64 strings to the screen. Copy them and save them into a text file and then upload it to your web server. Then run the other script (see below) and it will write the image to your web server. The resulting image will be large and possibly choppy, so open up GIMP and optimize for difference and GIF. When saving, force it to use the same delay for all frames so the animation is smooth.

---

May not be too hard using PHP.

1. Grab the dataURL (base64 encoded string) for each frame with JS and send it to the server.
2. Decode the base64 strings and convert them to Imagick objects.
3. Add these Imagick objects as frames to a new Imagick object.
4. Save the Imagick object to the file system as a GIF.

Since michael already posted a nice JS solution, I'll add the server side code if you wish to automate it:

readimageblob(base64_decode($imageData[$i]));
   $gif->addImage($tempImg);
}

$gif->setFormat('gif');
$gif->setImageDelay($delay);
$gif->writeImages($filename, true);

?>

I haven't written much PHP for a year or two so be sure to double check everything and so on.