官方网址
API

引用方式

  1. nstall NPM
  2. npm install --save html2canvas
  4. Install Yarn
  5. yarn add html2canvas
  7. Script src
  8. http://html2canvas.hertzen.com/dist/html2canvas.js
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script  src="./html2canvas.js"></script>
  7. </head>
  8. <body>
  9. <div id="view" style="border:1px solid red;">
  10.     <img src="./pl-user.png" alt="">
  11.     <input type="button" value="截图" onclick="takeScreenshot()">
  12. </div>
  13. </body>
  14. <script type="text/javascript">
  16.     function takeScreenshot() {
  17.         /*domId   配置参数 */
  18.         html2canvas(document.getElementById('view'), {
  19.             backgroundColor: "#fff",
  20.             useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
  21.             // width: 300,
  22.             // height: 300
  23.         }).then((canvas) => {
  24.            //把截的图显示在网页上
  25.             document.body.appendChild(canvas);
  26.             //点击截图下载到本地
  27.             let url = canvas.toDataURL("image/png");
  28.             let a = document.createElement("a");
  29.             a.href = url;
  30.             a.download = "二维码";
  31.             a.click();
  32.         });
  33.     }
  34. </script>
  35. </html>

  • 截图上传到服务器

    1. html2canvas(document.getElementById('view'), {
    2. backgroundColor: "#fff",
    3. // width: 300,
    4. // height: 300
    5. }).then((canvas) => {
    6. let base64 = canvas.toDataURL("image/png"); // 先转化为base64
    7. /* 将html2canvas生成截图上传到服务器 */
    8. let bstr = atob(base64.split(',')[1]);    // atob是将base64编码解码，去掉data:image/png;base64,部分
    9. let n = bstr.length;
    10. let u8arr = new Uint8Array(n);
    12. while (n--) {
    13.   u8arr[n] = bstr.charCodeAt(n);
    14. }
    16. let file2 = new File([u8arr], 'a.jpg', {type: 'image/jpg'})
    18. var formData = new FormData();
    19. formData.append("file", file2);
    20. });