【JS组件篇】使用 html2canvas 组件获取指定html标签范围内的内容截图

需求：当用户提交表单数据的同时，获取用户当前所在页面的截图，同时提交给后端，用于后续的审批操作知悉数据来源。

react 端使用 html2canvas 实现根据某标签节点截图

1.安装 html2canvas

npm install html2canvas

2.引入插件：

import html2canvas from 'html2canvas';

3.使用：

const getScreenshot = () => {
    html2canvas(document.getElementById('ice-container'), { // ice-container为被截图节点id
      allowTaint: false,
      useCORS: true, // 支持跨域图片的截取，不然图片截取不出来
    }).then(canvas => {
      // 获取图片的base64编码格式
      const screenshotUrl = canvas.toDataURL('image/png');
      // 后续的操作,如回调、展示图片等
      // ...
      // setImgSrc(screenshotUrl)
    })
  }

4.注意：截图的画布大小根据浏览器的不同会有所限制

这里的数字指的是像素大小，若画布超出限制，则可能生成空白截图

vue 端也可以使用该组件，安装及使用方式相同。