Canvas Upload

gistfile1.js

function sendSigning() {
	var xhr = new XMLHttpRequest();
	
        // Install progress bar / Upload status update
	xhr.upload.addEventListener( 'progress', function(e) {
		if ( e.lengthComputable ) {
			var percentage = Math.round( (e.loaded *100) /e.total );
			$('div#log').text( "Upload Status: " + percentage + "%");
		}
	});

	// Say what we do on success
	xhr.onreadystatechange = function() {
		if ( xhr.readyState == 4 && xhr.status == 200) {
			$('div#log').html( xhr.responseText );
			// Re-Fetch Image  and display
			$('img#result')
				.attr('src', 'up/upload/signing.png?' + new Date().getTime())
				.attr('border', 1);
		} else if ( xhr.readyState == 4 && xhr.status != 200 ) {
			$('div#log').text( "Fail" );
		}
	}
	payload = $.browser.mozilla 
		? canvas.mozGetAsFile( 'signing.png' )
		: canvas.toDataURL( 'image/png' );

	var formData = new FormData();
	formData.append( 'name', 'signing.png' );
	formData.append( 'file', payload );
	xhr.open( 'POST', 'up/upload_file.php' );
	xhr.send( formData );
}