capture div into image using html2canvas

Question

I m trying to capture a div into an image using html2canvas  I have read some similar question here like  How to upload a screenshot using html2canvas   create screenshot of web page using html2canvas  unable to initialize properly     I have tried the code  canvasRecord       div   html2canvas     dataURL   canvasRecord toDataURL  image png      and the canvasRecord will be undefined after  html2canvas   called    and also this      div   html2canvas         onrendered  function  canvas               var img   canvas toDataURL              window open img                  browser gives some  48 to be exact  similar errors like   GET http   html2canvas appspot com  url https 3A 2F 2Fmts1 googleapis com 2Fvt     26z 3D12 26s 3DGalileo 26style 3Dapi 257Csmartmaps amp callback html2canvas 1 404  Not Found       BTW  I m using v0 34 and I have added the reference file html2canvas min js and jquery plugin html2canvas js  How can I convert the div into canvas in order to capture the image   EDIT on 26 Mar 2013  I found Joel s example works   But unfortunately when Google map embedded in my app  there will be errors    lt html gt   lt head gt   lt style type  text css  gt  div testdiv       height 200px      width 200px      background  222    div map canvas       height  500px      width  800px      position  absolute  important      left  500px      top  0     lt  style gt    lt script type  text javascript  src  https   maps googleapis com maps api js v 3 amp sensor false  gt  lt  script gt   lt script type  text javascript  src  html2canvas min js  gt  lt  script gt   lt script type  text javascript  src  jquery-1 7 2 min js  gt  lt  script gt   lt script language  javascript  gt    window  load function         var mapOptions             backgroundColor    fff           center  new google maps LatLng 1 355  103 815           overviewMapControl  true          overviewMapControlOptions    opened  false            mapTypeControl  true          mapTypeControlOptions    position  google maps ControlPosition TOP LEFT  style  google maps MapTypeControlStyle DROPDOWN MENU            panControlOptions    position  google maps ControlPosition RIGHT CENTER            zoomControlOptions    position  google maps ControlPosition RIGHT CENTER            streetViewControlOptions    position  google maps ControlPosition RIGHT CENTER            disableDoubleClickZoom  true          mapTypeId  google maps MapTypeId ROADMAP          minZoom  1          zoom  12            map   new google maps Map document getElementById  map canvas    mapOptions            load   click function                 html2canvas     testdiv                      onrendered  function  canvas                        var img   canvas toDataURL  image png                       window open img                                                   lt  script gt   lt  head gt   lt body gt   lt div id  testdiv  gt   lt  div gt   lt div id  map canvas  gt  lt  div gt   lt input type  button  value  Save  id  load   gt   lt  body gt   lt  html gt

User · Answer

It can be easily done using html2canvas  try out the following   try adding the div inside a html modal and call the model id using a jquery function  In the function you can specify the size  height  width  of the image to be displayed  Using modal is an easy way to capture a html div into an image in a button onclick   for example have a look at the code sample                              lt  -- Modal content-- gt           lt div class  modal-content  gt               lt div class  modal-header  gt                 lt div class  modal-body  gt                   lt p gt Some text in the modal  lt  p gt       paste the div  which you want to be displayed  inside the model  Hope it will help

User · Answer

you can try this code to capture a div When the div is very wide or offset relative to the screen  var div       div   0   var rect   div getBoundingClientRect     var canvas   document createElement  canvas    canvas width   rect width  canvas height   rect height   var ctx   canvas getContext  2d    ctx translate -rect left -rect top    html2canvas div        canvas canvas      height rect height      width rect width      onrendered  function canvas            var image   canvas toDataURL  image png            var pHtml     lt img src   image     gt                parent   append pHtml

User · Answer

If you just want to have screenshot of a div  you can do it like this  html2canvas     div        onrendered  function canvas        var img   canvas toDataURL       window open img

User · Answer

I don t know if the answer will be late  but I have used this form  JS  function getPDF             html2canvas document getElementById  quot toPDF quot             onrendered function canvas             var img canvas toDataURL  quot image png quot            var doc   new jsPDF  l    cm             doc addImage img  PNG  2 2            doc save  reporte pdf                          HTML   lt div id  quot toPDF quot  gt        your content     lt  div gt    lt button  id  quot getPDF quot  type  quot button quot  class  quot btn btn-info quot  onclick  quot getPDF   quot  gt      Download PDF  lt  button gt

User · Answer

You can get the screenshot of a division and save it easily just using the below snippet  Here I m used the entire body  you can choose the specific image div elements just by putting the id class names   html2canvas document getElementsByClassName  quot image-div quot   0       useCORS  true     then function  canvas      var imageURL   canvas toDataURL  quot image png quot      let a   document createElement  quot a quot      a href   imageURL    a download   imageURL    a click

User · Answer

I ran into the same type of error you described  but mine was due to the dom not being completely ready to go   I tested with both jQuery pulling the div and also getElementById just to make sure there wasn t something strange with the jQuery selector   Below is an example that works in Chrome    lt html gt   lt head gt   lt style type  text css  gt  div       height  50px      width  50px      background-color   2C7CC3     lt  style gt   lt script type  text javascript  src  html2canvas js  gt  lt  script gt   lt script type  text javascript  src  jquery-1 9 1 js  gt  lt  script gt   lt script language  javascript  gt    document  ready function       var testdiv   document getElementById  testdiv        html2canvas     testdiv              onrendered  function canvas                   canvas is the final rendered  lt canvas gt  element             var myImage   canvas toDataURL  image png                window open myImage                          lt  script gt   lt  head gt   lt body gt   lt div id  testdiv  gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

window open didn t work for me    just a blank page rendered    but I was able to make the png appear on the page by replacing the src attribute of a pre-existing img element created as the target    x000D   x000D      btn screenshot   click function    x000D       element to png  container    testhtmltocanvasimg    x000D      x000D   x000D   x000D  function element to png srcElementID  targetIMGid   x000D      console log  element to png called for element id     srcElementID   x000D      html2canvas       srcElementID  0   then  function  canvas    x000D          var myImage   canvas toDataURL  image png    x000D                targetIMGid  attr  src   myImage   x000D    console log  html2canvas completed   png rendered to     targetIMGid   x000D          x000D    x000D   lt div id  testhtmltocanvasdiv  class  mt-3  gt  x000D      lt img src    id  testhtmltocanvasimg  gt  x000D   lt  div gt  x000D   x000D   x000D    I can then right-click on the rendered png and  save as    May be just as easy to use the   snipping tool  to capture the element  but html2canvas is an certainly an interesting bit of code

User · Answer

You should try this  test  works at least in Firefox    html2canvas document body      onrendered function canvas         document body appendChild canvas              Im running these lines of code to get the full browser screen  only the visible screen  not the hole site    var w window  d document  e d documentElement  g d getElementsByTagName  body   0   var y w innerHeight  e clientHeight  g clientHeight   html2canvas document body      height y     onrendered function canvas         var img   canvas toDataURL               More explanations  amp  options here  http   html2canvas hertzen com   documentation html

[javascript] capture div into image using html2canvas

Examples related to javascript

Examples related to html

Examples related to html2canvas