JS implements browser screenshots, JS implements html2canvas for Html to image function

1. html2canvas

Screenshots with JavaScript

Official website address: http://html2canvas.hertzen.com/


html2canvas can directly take screenshots of the whole or part of the page on the user's browser side. This html2canvas script will render the page as a Canvas image by reading the DOM and applying different styles to these elements. ·

It does not require any rendering from the server, the entire image is created in the client browser. When the browser does not support Canvas, Flashcanvas or ExplorerCanvas technology will be used instead. The following browsers can support this script well: Firefox 3.5+, Google Chrome, new versions of Opera, browsers above IE9.

html2canvas can obtain a certain element of HTML and then generate Canvas, allowing users to save as pictures

Use Cases:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <script src="../plugins/html2canvas.min.js"></script>
  8. </head>
  9. <body>
  10. <div id="capture" style="padding: 10px; background: #f5da55">
  11. <h4 style="color: #000; ">Hello world!</h4>
  12. <p>asdfasdfasdf</p>
  13. <!-- <img src="http://yawz.qianlekh.com/file/logo/166.jpg"> -->
  14. < p > This is a cross-domain image </ p >
  15. < img src = "http://p7.qhimg.com/t01ceede0272d4b5a8b.png" alt = "Come a spanning picture" style = "width:50px;height:50px;" >
  16. </div>
  17. <hr>
  18. <script>
  19. html2canvas(document.querySelector("#capture"),{
  20. useCORS : true // Allows to load cross-domain images, and the corresponding server needs to set the image cross-domain
  21. }).then(canvas => {
  22. document.body.appendChild(canvas)
  23. });
  24. </script>
  25. </body>
  26. </html>

Show results:

2. Scrolling Screenshot
Clone the target area Dom, and set the pride of the cloned Dom, just take a screenshot of the cloned area

  1. const targetDom = document.querySelector("#admin")
  2. const copyDom = targetDom.cloneNode(true)
  3. copyDom.style.width = targetDom.scrollWidth + 'px'
  4. copyDom.style.height = targetDom.scrollHeight + 'px'
  5. document.body.appendChild(copyDom)
  6. html2canvas(copyDom, {
  7. allowTaint: false,
  8. useCORS: true,
  9. height: targetDom.scrollHeight,
  10. width: targetDom.scrollWidth
  11. }).then(canvas => {
  12. // canvas
  13. });

3. There are cross-domain pictures in the screenshot area

  1. // allowTaint: false does not allow cross-domain images to pollute the canvas
  2. // useCORS: true allows loading cross-domain images

4. Download pictures

  1. // under canvas before inserting
  2. html2canvas(copyDom, {
  3. allowTaint: false,
  4. useCORS: true,
  5. height: targetDom.scrollHeight,
  6. width: targetDom.scrollWidth
  7. }).then(canvas => {
  8. this.printShow = true
  9. copyDom.parentNode.removeChild(copyDom)
  10. // console.log(canvas.style.width)
  11. canvas.style.width = parseFloat(canvas.style.width) * 0.8 + 'px'
  12. canvas.style.height = parseFloat(canvas.style.height) * 0.8 + 'px'
  13. setTimeout(() => {
  14. const container = document.querySelector('#view')
  15. while (container.hasChildNodes()) {
  16. container.removeChild(container.firstChild)
  17. }
  18. // toImage
  19. const dataImg = new Image()
  20. dataImg.src = canvas.toDataURL('image/png')
  21. document.querySelector('#view').appendChild(dataImg)
  22. const alink = document.createElement("a");
  23. alink.href = dataImg.src;
  24. alink.download = "testImg.jpg";
  25. alink.click ( );
  26. }, 0 )
  27. });

 

More:

Jquery plugin for js printing, Div printing

Japan map selection plugin, Japan region selection plugin

 jdate(jquery-date) of JQuery mobile version date selection control

Related: JS implements browser screenshots, JS implements html2canvas for Html to image function