JS库html2canvas实现页面截屏

普通常见用法

• 安装

  npm install html2canvas
  

• 页面

  //html代码
  <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
  <div class="image_tofile" ref="imageDemo">
    <!-- 这里放需要截图的元素,自定义组件元素也可以 -->
  </div>
  <button @click="toImage">点击生成图片</button>
  <!-- 如果需要展示截取的图片,给一个img标签 -->
  <img :src="htmlUrl">
  

• 使用

  import html2canvas from 'html2canvas'
  // 注册组件
  components: {
      html2canvas
  },
  data () {
    return {
      htmlUrl: ''    // 存放生成图片的地址
    }
  },
  methods: {
    // 页面元素转图片
    toImage () {
        // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
        html2canvas(this.$refs.imageDemo, {
               backgroundColor: null,   //设置截图的背景色
               useCORS: true, // 解决文件跨域问题
               allowTaint: false, //允许跨域
               taintTest: true, //是否在渲染前测试图片
        }).then((canvas) => {
            let url = canvas.toDataURL('image/png')；//指定转换格式可不填
                this.htmlUrl = url;
                或者原生添加a标签导出
                copyDom.remove();
                let url = canvas.toDataURL("image/png");
                let link = document.createElement('a');
                link.href = url;
                link.style.display = 'none';
                link.setAttribute('download', '病区分析');
                document.body.appendChild(link);
                link.click();
                link.remove();
  
                //提示弹窗
                setTimeout(() => {
                      this.$toast({
                          message: '图片已生成，长按保存分享给你的好友吧',
                          position: 'middle',
                          duration: 3000
                    });
                }, 500)
            })
          },
      }
  

特殊情况

• 滚动截屏

  const targetDom = document.querySelector("#admin")，//需要截屏的区域
  const copyDom = targetDom.cloneNode(true);//设置true,将递归复制当前节点的所有子孙节点,false只复制当前节点
  copyDom.style.width = targetDom.scrollWidth + 'px'
  copyDom.style.height = targetDom.scrollHeight + 'px'
  document.body.appendChild(copyDom)
  html2canvas(copyDom, {
      allowTaint: false,
      useCORS: true,
      height: targetDom.scrollHeight,
      width: targetDom.scrollWidth
  }).then(canvas => {
    // canvas
  });
  

• 截屏下载保存，浏览器自带长按可实现，此通用方法（PC端）

  // 插入之前canvas下
  html2canvas(copyDom, {
              allowTaint: false,
              useCORS: true,
              height: targetDom.scrollHeight,
              width: targetDom.scrollWidth
          }).then(canvas => {
              copyDom.parentNode.removeChild(copyDom)
              canvas.style.width = parseFloat(canvas.style.width) * 0.8 + 'px'
              canvas.style.height = parseFloat(canvas.style.height) * 0.8 + 'px'
              setTimeout(() => {
                  const container = document.querySelector('#view')；//选择存放展示下载图片的节点
                  while (container.hasChildNodes()) {
                      container.removeChild(container.firstChild)
                  }
                  // toImage
                  const dataImg = new Image()
                  dataImg.src = canvas.toDataURL('image/png')
                  document.querySelector('#view').appendChild(dataImg)
                  // 通过a标签实现下载
                  const alink = document.createElement("a");
                  alink.href = dataImg.src;
                  alink.download = "testImg.jpg";
                  alink.click();
              }, 0)
          });
  

参数文档