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)
        });

参数文档

最后编辑于：2021.11.29 10:04:03