Vue截图（根据元素ID截取）

下载插件：

---

npm install html2canvas filesaver --save

npm install --save file-saver

 

引用：

import html2canvas from "html2canvas";

使用方法：

//屏幕截图、保存图片到相册
handleExport() {
      let htmlDom = document.getElementById("long"); // 你要截图的元素  可直接是img
      var FileSaver = require("file-saver");
      this.$nextTick(function () {
        html2canvas(htmlDom, {
          scale: 1,
          x: htmlDom.offsetLeft, //传入x和y长度，拒绝空白图片
          y: htmlDom.offsetTop,
          allowTaint: false, //允许污染
          taintTest: true, //在渲染前测试图片
          useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用)
          background: "#fff",
        }).then((canvas) => {
         // getBase64Image（imgurl）
          if (navigator.msSaveBlob) {
            navigator.msSaveBlob(canvas.msToBlob(), "demo.png");
          } else {
            canvas.toBlob(function (blob) {
              FileSaver.saveAs(blob, "demo.png");
            });
          }
        });
      });
},