How to take screenshot of a div with JavaScript

Question

I am building something called the  HTML Quiz   It s completely ran on JavaScript and it s pretty cool   At the end  a results box pops up that says  Your Results   and it shows how much time they took  what percentage they got  and how many questions they got right out of 10  I would like to have a button that says  Capture results  and have it somehow take a screenshot or something of the div  and then just show the image captured on the page where they can right click and  Save image as    I really would love to do this so they can share their results with others  I don t want them to  copy  the results because they can easily change that  If they change what it says in the image  oh well   Does anyone know a way to do this or something similar

User · Answer

lt script src   assets backend js html2canvas min js  gt  lt  script gt     lt script gt          download   on  click   function            html2canvas     printform                  onrendered  function  canvas                    var url   canvas toDataURL                     var triggerDownload       lt a gt    attr  href   url  attr  download   getNowFormatDate             jpeg   appendTo  body                    triggerDownload 0  click                    triggerDownload remove                                      lt  script gt    quotation

User · Answer

You can t take a screen-shot  it would be an irresponsible security risk to let you do so  However  you can    Do things server-side and generate an image Draw something similar to a Canvas and render that to an image  in a browser that supports it  Use some other drawing library to draw directly to the image  slow  but would work on any browser

User · Answer

It s to simple you can use this code for capture the screenshot of particular area  you have to define the div id in html2canvas  I m using here 2 div-  div id  car  div id   chartContainer  if you want to capture only cars then use car i m capture here car only you can change chartContainer for capture the graph html2canvas     car   copy and paste this code   x000D   x000D   lt html gt  x000D       lt head gt  x000D   x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   code jquery com ui 1 12 1 jquery-ui js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs html2canvas 0 4 1 html2canvas min js  gt  lt  script gt  x000D   lt script src  https   code jquery com jquery-1 12 4 min js  integrity  sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ Xp8a4MxAQ   crossorigin  anonymous  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jspdf 1 3 5 jspdf min js  gt  lt  script gt  x000D   lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome min css  gt  x000D   lt link rel  stylesheet  href  https   use fontawesome com releases v5 2 0 css all css  integrity  sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK iSvJ a4 0owXq79v lsFkW54bOGbiDQ  crossorigin  anonymous  gt  x000D   lt script gt  x000D      window onload   function      x000D       x000D      var chart   new CanvasJS Chart  chartContainer     x000D          animationEnabled  true  x000D          theme   light2   x000D          title   x000D              text   Simple Line Chart  x000D             x000D          axisY   x000D              includeZero  false x000D             x000D          data             x000D              type   line          x000D              dataPoints    x000D                    y  450    x000D                    y  414   x000D                    y  520  indexLabel   highest  markerColor   red   markerType   triangle     x000D                    y  460    x000D                    y  450    x000D                    y  500    x000D                    y  480    x000D                    y  480    x000D                    y  410   indexLabel   lowest  markerColor   DarkSlateGrey   markerType   cross     x000D                    y  500    x000D                    y  480    x000D                    y  510   x000D   x000D                x000D             x000D          x000D      chart render    x000D       x000D        x000D   lt  script gt  x000D   lt  head gt  x000D   x000D   lt body bgcolor  black  gt  x000D   lt div id  wholebody  gt    x000D   lt a href  javascript genScreenshotgraph    gt  lt button style  background aqua  cursor pointer  gt Get Screenshot of Cars onl  lt  button gt   lt  a gt  x000D   x000D   lt div id  car  align  center  gt  x000D       lt i class  fa fa-car  style  font-size 70px color red   gt  lt  i gt  x000D       lt i class  fa fa-car  style  font-size 60px color red   gt  lt  i gt  x000D       lt i class  fa fa-car  style  font-size 50px color red   gt  lt  i gt  x000D       lt i class  fa fa-car  style  font-size 20px color red   gt  lt  i gt  x000D       lt i class  fa fa-car  style  font-size 50px color red   gt  lt  i gt  x000D       lt i class  fa fa-car  style  font-size 60px color red   gt  lt  i gt  x000D       lt i class  fa fa-car  style  font-size 70px color red   gt  lt  i gt  x000D   lt  div gt  x000D   lt br gt  x000D   lt div id  chartContainer  style  height  370px  width  100    gt  lt  div gt  x000D   lt script src  https   canvasjs com assets script canvasjs min js  gt  lt  script gt  x000D   x000D   lt div id  box1  gt  x000D   lt  div gt  x000D   lt  div gt  gt  x000D   lt  body gt  x000D   x000D   lt script gt  x000D   x000D  function genScreenshotgraph    x000D    x000D      html2canvas     car      x000D           x000D        onrendered  function canvas    x000D   x000D          var imgData   canvas toDataURL  image jpeg    x000D          var pdf   new jsPDF    x000D          pdf addImage imgData   JPEG   0  0  -180  -180   x000D          pdf save  download pdf    x000D           x000D         x000D         x000D          x000D           x000D   x000D    x000D   x000D   lt  script gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

As far as I know its not possible with javascript   What you can do for every result create a screenshot  save it somewhere and point the user when clicked on save result   I guess no of result is only 10 so not a big deal to create 10 jpeg image of results

User · Answer

As far as I know you can t do that  I may be wrong  However I d do this with php  generate a JPEG using php standard functions and then display the image  should not be a very hard job  however depends on how flashy the contents of the DIV are

User · Answer

If you wish to have  Save as  dialog  just pass image into php script  which adds appropriate headers  Example  all-in-one  script script php   lt  php if isset   GET  image           image     GET  image         if preg match    data image      base64       s    image   match             base64    match 2            imageBody   base64 decode  base64            imageFormat    match 1            header  Content-type  application octet-stream            header  Pragma  public            header  Expires  0            header  Cache-Control  must-revalidate  post-check 0  pre-check 0            header  Cache-Control  private   false      required for certain browsers         header  Content-Disposition  attachment  filename   file    imageFormat            png is default for toDataURL         header  Content-Transfer-Encoding  binary            header  Content-Length    strlen  imageBody            echo  imageBody            exit    endif   gt    lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 7 2 jquery min js ver 1 7 2  gt  lt  script gt   lt canvas id  canvas  width  300  height  150  gt  lt  canvas gt   lt button id  btn  gt Save lt  button gt   lt script gt        document  ready function            var canvas   document getElementById  canvas            var oCtx   canvas getContext  2d            oCtx beginPath            oCtx moveTo 0 0           oCtx lineTo 300 150           oCtx stroke                 btn   on  click   function                   opens dialog but location doesnt change due to SaveAs Dialog             document location href     script php image     canvas toDataURL                         lt  script gt

User · Answer

No  I don t know of a way to  screenshot  an element  but what you could do  is draw the quiz results into a canvas element  then use the HTMLCanvasElement object s toDataURL function to get a data  URI with the image s contents   When the quiz is finished  do this   var c   document getElementById  the canvas element id    var t   c getContext  2d       then use the canvas 2D drawing functions to add text  etc  for the result      When the user clicks  Capture   do this   window open     document getElementById  the canvas element id   toDataURL       This will open a new tab or window with the  screenshot   allowing the user to save it  There is no way to invoke a  save as  dialog of sorts  so this is the best you can do in my opinion

User · Answer

This is an expansion of  Dathan s answer  using html2canvas and FileSaver js     function              btnSave   click function              html2canvas     widget                  onrendered  function canvas                    theCanvas   canvas                    canvas toBlob function blob                        saveAs blob   Dashboard png                                                                 This code block waits for the button with the id btnSave to be clicked  When it is  it converts the widget div to a canvas element and then uses the saveAs   FileSaver interface  via FileSaver js in browsers that don t support it natively  to save the div as an image named  Dashboard png     An example of this working is available at this fiddle

User · Answer

var shot1 imagify     widget   0    base64    gt         img screenshot   attr  src   base64         Take a look at htmlshot package   then  check  deeply the client side section    npm install htmlshot

User · Answer

After hours of research  I finally found a solution to take a screenshot of an element  even if the origin-clean FLAG is set  to prevent XSS   that  s why you can even capture for example Google Maps  in my case   I wrote a universal function to get a screenshot  The only thing you need in addition is the html2canvas library  https   html2canvas hertzen com     Example   getScreenshotOfElement    div toBeCaptured   get 0   0  0  100  100  function data           in the data variable there is the base64 image        exmaple for displaying the image in an  lt img gt         img captured   attr  src    data image png base64   data         Keep in mind console log   and alert   won  t generate output if the size of the image is great   Function   function getScreenshotOfElement element  posX  posY  width  height  callback        html2canvas element            onrendered  function  canvas                var context   canvas getContext  2d                var imageData   context getImageData posX  posY  width  height  data              var outputCanvas   document createElement  canvas                var outputContext   outputCanvas getContext  2d                outputCanvas width   width              outputCanvas height   height               var idata   outputContext createImageData width  height               idata data set imageData               outputContext putImageData idata  0  0               callback outputCanvas toDataURL   replace  data image png base64                             width  width          height  height          useCORS  true          taintTest  false          allowTaint  false

[javascript] How to take screenshot of a div with JavaScript?

Examples related to javascript

Examples related to jquery

Examples related to html