Saving html 5 canvas image on local hard drive

I created shapes on html 5 canvas using the kineticjs library. Now I want to save the canvas as an image on the hard drive of my local system. Pls tell me how I can achieve this using the KineticJS library.

+5
source share
1 answer

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

Once you have this URL, open it in another browser window and do a standard right-click → Save Image As, and save it as JPG / PNG / etc.

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

, , , - .

. HTML5 FileSystem.

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

dataURL canvas KinectJS Stage . /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/

+3

All Articles