相关文件(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()

            }

          }

        });

巴特西

使用html2canvas实现屏幕截图

相关文件(vue3.0)

兼容 IE

截图到下载一键完成

最新文章

热门文章