使用html2canvas实现屏幕截图

相关文件(vue3.0)

 <script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.js"></script> //兼容IE
 <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta3/html2canvas.js"></script>
    //https://blog-static.cnblogs.com/files/wwj007/bluebird.js
    //https://blog-static.cnblogs.com/files/wwj007/html2canvas.js

    // 调用html2canvas插件
        html2canvas(document.body).then(function (canvas) {
          // canvas宽度
          var canvasWidth = canvas.width;
          // canvas高度
          var canvasHeight = canvas.height;
          // 调用Canvas2Image插件
          var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
          //图片类型.宽度.高度.文件名
          let type = document.getElementById('sel') ? document.getElementById('sel').getAttribute('value') : null
          let w = document.getElementById('imgW') ? document.getElementById('imgW').getAttribute('value') : null
          let h = document.getElementById('imgH') ? document.getElementById('imgH').getAttribute('value') : null
          let f = document.getElementById('imgFileName') ? document.getElementById('imgFileName').getAttribute('value') : null
          w = (w === '') ? canvasWidth : w; //判断输入宽高是否为空，为空时保持原来的值
          h = (h === '') ? canvasHeight : h;
          // 调用Canvas2Image插件
          Canvas2Image.saveAsImage(canvas, w, h, type, f);
        });

兼容 IE

 html2canvas(document.body, {
          allowTaint: false,
          foreignObjectRendering: true,
          taintTest: false,
          useCORS: true,//火狐浏览器添加项
          onrendered: function (canvas) {
            var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            var userAgent = navigator.userAgent;
            //判断是否是IE11
            if (-1 !== userAgent.indexOf("Trident")) {
              var arr = image.split(',');
              var mime = arr[0].match(/:(.*?);/)[1];
              var bstr = atob(arr[1]);
              var n = bstr.length;
              var u8arr = new Uint8Array(n);
              while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
              }
              window.navigator.msSaveBlob(new Blob([u8arr], { type: mime }), "download.png");
            } else {
              canvas.id = "mycanvas";
              //生成base64图片数据
              var dataUrl = canvas.toDataURL();
              var newImg = document.createElement("img");
              newImg.setAttribute('crossOrigin', 'anonymous');
              newImg.src = dataUrl;
              var b = document.createElement('a')
              b.setAttribute("href", dataUrl)
              b.setAttribute("download", "img.png")
              document.body.appendChild(b)//火狐浏览器添加项
              b.click(); b.remove()
            }
          }
        });

截图到下载一键完成