SoSLUG's Alan Campion, has done a wonderful job of teaching us all about things we can do using the new HTML5 canvas tag. This is designed as a supplementary article to his efforts, to show some things you can do with the HTML5 canvas tag to save/serialize it's data for use elsewhere.

Using Internet explorer or browsers without support for the canvas tag, may break this tutorial. The strange part is that IE does support data URI's for versions 8-10, but not fully as with firefox, chrome and other data URI compliant browsers and software(s). for this tutorial, I will be following on from Alan's previous tutorial on Polygons and the artists colour wheel. Polygons and the artistsColour wheel

Client Side

The client side export trick actually depends upon a few things to work fully. 1) only chrome supports the download attribute on an a tag to specify a custom file-name. 2) requires non-IE browser to allow download of the image file

The Additional Markup

The following markup, should come after the tag... It can come before but it can have emergent behavior, depending upon how proficient a web-developer you are.

<a id="canvasDLHelper" style="display:none;" href="javascript:void(0);" download="canvas.png" > </a>
<input type="button" id="save" onclick="dl();" value="save" />

The Javascript

This should come after the additional HTML markup

<script type="text/javascript">
window.dl = function() {
  var canvas = document.getElementById('fig4'); /* this line can be commented out, if you change 
                                                   the canvas in the script from Alan's tutorial 
                                                   to be window.canvas = document.getElementById('fig4');
                                                 */
  var data = canvas.toDataURL('image/png');
   var imgDLHelper = document.getElementById('canvasDLHelper');
   imgDLHelper.setAttribute('href',data.replace('image/png','image/octet-stream'));
   imgDLHelper.click();
    
}
</script>

Playing with this

I have a jsfiddle setup some two weeks ago to demonstrate this functionality (please excuse the drawing, it is mostly done that way to show the speed of your particular browsers canvas API... JS Fiddle Signature-Box Sandbox

Server-side output using PHP

Sometimes you may wish to save this using PHP, or in fact any scripting language that supports Data URI's, so that you can deal with the content, and serialize(store), transform or manipulate. IT is best not to store this output in a database, but rather, store to a file and store the files location in the database.

The Additional Markup

The following markup, should come after the tag... It can come before but it can have emergent behavior, depending upon how proficient a web-developer you are.

<form id="form_name" name="form_name" action="./submit.php" method="post" class="general-form upload" accept-charset="utf-8" enctype="multipart/form-data">
  <textarea style="display: none;" id="canvasDLHelper" name="canvasDLHelper"></textarea>
  <input type="submit" id="save" onclick="dl();" value="save" />
</form>

The Javascript

This should come after the additional HTML markup

<script type="text/javascript">
window.dl = function() {
  var canvas = document.getElementById('fig4'); /* this line can be commented out, if you change 
                                                   the canvas in the script from Alan's tutorial 
                                                   to be window.canvas = document.getElementById('fig4');
                                                 */
   var data = canvas.toDataURL('image/png');
   var imgFormHelper = document.getElementById('canvasDLHelper');
   imgFormHelper.innerHTML = data;
   return true; // continue form submission
    
}
</script>

The PHP Code

NOTE: The above is procedural code

<?
// process.php
$data = $_POST['canvasDLHelper'];

function checkIsBase64Img($inStr,$reqWidth,$reqHeight) {
	$im = imagecreatefromstring(file_get_contents($inStr));
	
	if ($im === false) { // if invalid
		return false;
	}
	
	if( (imagesx($im) != $reqWidth) && (imagesy($im) != $reqHeight) ) { // if not the right size
		return false;
	}
	
	return true;
}

// really basic syntax
$canvasDimensions = array('width'=>473,'height'=>160);
if(checkIsBase64Img($data,$canvasDimensions['width'],$canvasDimensions['height'],'image/png')){
	echo "Success!<br/>";
        echo '<img src="'.$data.'" style="border: 1px solid #000;" />'; // shows image
} else {
	echo "Failure!<br/>";
        echo '=[';
}
?>