How to save the contents of a div as a image

Question

Basically  I am doing what the heading states  attempting to save the contents of a div as an image   I plan on making a small online application for the iPad   One function that is a must is having a  Save  button that can save the full webpage as an image  and save that image to the iPad s camera roll  I wish to save the full contents of a div  not just the visible area   I have searched briefly online  but couldn t find much documentation on anything  I found a lot on HTML5 Canvas  Here is some code I put together    lt script gt  function saveimg         var c   document getElementById  mycanvas        var t   c getContext  2d        window location href   image       window open     document getElementById  mycanvas   toDataURL        lt  script gt    lt div id  mycanvas  gt  This is just a test lt br   gt  12344 lt br   gt   lt  div gt    lt button onclick  saveimg    gt Save lt  button gt    Although  I am getting this error   TypeError  c getContext is not a function   This application will be built only with HTML  CSS and jQuery  or other Javascript libraries

User · Accepted Answer

There are several of this same question  1  2   One way of doing it is using canvas  Here s a working solution  Here you can see some working examples of using this library

User · Answer

Do something like this   A  lt div gt  with ID of  imageDIV  another one with ID  download and a hidden  lt div gt  with ID  previewImage   Include the latest version of jquery  and jspdf debug js from the jspdf CDN  Then add this script   var element       imageDIV       global variable var getCanvas     global variable    document   ready function      html2canvas element        onrendered  function  canvas              previewImage   append canvas         getCanvas   canvas                      download   on  click   function        var imgageData   getCanvas toDataURL  image png         Now browser starts downloading it instead of just showing it   var newData   imageData replace   data image  png    data application octet-stream          download   attr  download    image png   attr  href   newData         The div will be saved as a PNG on clicking the  download

[javascript] How to save the contents of a div as a image?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to screenshot