🧔 Hello World

How to convert Canvas animation in HD Avi video file

2012-02-03 / ( 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

When the canvas animation is ready the First step is to locate the canvas DOM element and to create a copy of that canvas content into another canvas element. This works easyly with javascript.

// Create new canvas element 

var canvas_draw = $('#canvas-draw-fancy');

canvas_draw.width = 320;

canvas_draw.height = 240;

var canvas_draw = $('canvas')[2].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")[0].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();

ajax.open("POST",'makefile.php',false);

ajax.setRequestHeader('Content-Type', 'application/upload');

ajax.send(img.src);  

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

Then the php file is writing this data into PNG files. To save all images generated under one second I had to change the time() into microtime() because I generate one image every 40 milisecond in javascript with setInterval() to keep the frame rate at 25-30 frames per second.

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))

{

    // Get the data

    $imageData=$GLOBALS['HTTP_RAW_POST_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

    $unencodedData=base64_decode($filteredData);

 

    // 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