Saving the html 5 canvas image on local harddrive

Question

I had created shapes on html 5 canvas using kineticjs library. Now i want to save the canvas as an image on my local system harddrive. Pls tell me how can i achieve it by using KineticJS library.

Answer 1

After selecting the canvas (using something like document.getElementById I guess), you should be able to call the following to convert the canvas into a dataURL.

Once you've got that URL, open it in another browser window and do a standard Right Click->Save Image As, and save it as a JPG/PNG/etc.

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");

Whether or not you're able to save an image to the drive programmatically, I'm not sure, although I'd highly doubt it due to security constraints.

For more information regarding programmatically accessing the File System, check out this HTML5 FileSystem reference site.

http://www.html5rocks.com/en/tutorials/file/filesystem/

For more information regarding retrieving a dataURL for a KinectJS Stage canvas element, see the below snippet / url.

<script>
  stage.toDataURL({
    callback: function(){
      // do something with the data url
    },
    mimeType: 'image/jpeg',
    quality: 0.5
  });
</script>

http://www.html5canvastutorials.com/kineticjs/html5-canvas-stage-data-url-with-kineticjs/