How to convert Canvas animation in HD Avi video file ( 50 )
The purpose of this post is to show how to capture a canvas animation and transform it into avi video. PNG Capture in HD will be 1280 x 720 pixel.
Here is the avi result: http://www.youtube.com/watch?v=JXH99xmgrnE
Step 1 - Canvas Capture
// Create new canvas element
var canvas_draw = $('#canvas-draw-fancy');
canvas_draw.width = 320;
canvas_draw.height = 240;
var canvas_draw = $('canvas').getContext('2d');
// Import the image from the old canvas
canvas_draw.drawImage(renderer.domElement, 0, 0, 320, 240);
// Export the image from the canvas var img = new Image(); img.src = $("canvas").toDataURL('image/png'); img.width = 320;
// Print screens on same page if necesary for preview document.body.appendChild(img);
Reference page: http://www.html5rocks.com/en/tutorials/video/basics/
Step 2 - Send image code by Ajax
This image code has to be sended to a php file with ajax.
// set image data to php
var ajax = new XMLHttpRequest();
Rererence page: http://www.permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/
Step 3 - Write code in PNG files
// Get the data
// Remove the headers (data:,) part.
// A real application should use them according to needs such as to check image type
$filteredData=substr($imageData, strpos($imageData, ",")+1);
// Need to decode before saving since the data we received is already base64 encoded
// Save file. This example uses a hard coded filename for testing,
$fp = fopen("images/img_".microtime(1).".png", 'w');
fwrite( $fp, $unencodedData);
fclose( $fp );
Reference pages: http://www.chromescripts.com/tutorial.php?vidtuts=4 http://www.permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/
Step 4 - Loading all images in Virtualdub and export as avi
For this step is necesary to open all images as sequence in VirtualDub.
Reference page: http://www.educationtechnologies.com/modules/anim02/index.html