javascript - Saving the html 5 canvas image on local harddrive - Stack Overflow

admin管理员组

文章数量:1429728

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.

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.

• javascript
• html
• html5-canvas
• kineticjs

Share Improve this question Follow asked Feb 25, 2013 at 8:40 PGBPGB 9911 silver badge99 bronze badges 1

• 1 Would HTML5 localStorage be sufficient or does it have to be a real file in the users filesystem? – Philipp Commented Feb 25, 2013 at 12:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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./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./kineticjs/html5-canvas-stage-data-url-with-kineticjs/

本文标签： javascriptSaving the html 5 canvas image on local harddriveStack Overflow