526互联

html2canvas 截图不全问题解决

发布时间 2023-10-16 10:12:21作者: 土豆儿哥

有个低代码平台项目，需求是要将canvas画布上的echarts图表等组件截图保存，如果是正常比例（也就是百分百比例）截图是正常的，但如果画布处于缩放状态进行截图的话就会因组件上的一些样式影响而导致截图不全。为了解决这一问题，在网上也查找了很多资料，终于找到解决办法，亲测有效。

话不多说，上代码：

async setCollect(id: string) {
      try {
        // 克隆节点，默认为false，不复制方法属性，为true是全部复制。
        const cloneDom: any = document.querySelector(`#id_${id}`)?.cloneNode(true)
        // 设置克隆节点的style属性，因为之前的层级为0，我们只需要比被克隆的节点层级低即可。
        cloneDom.style.zIndex = -1
        // 将克隆节点动态追加到body后面。
        document.querySelector('body')?.append(cloneDom)

        // 生成图片
        const canvasImage: HTMLCanvasElement = await html2canvas(cloneDom, {
          backgroundColor: null,
          allowTaint: true,
          useCORS: true
        })
        // 移除复制的节点
        document.querySelector('body')?.removeChild(cloneDom)
        // 上传预览图
        let uploadParams = new FormData()
        uploadParams.append(
          ...
        )
      } catch (value) {
        loadingError()
      }
    }