前端dom元素转换成图片

背景：

最近做了一个需求，需要将页面中的dom结构转换成图片，开始选用了html2Canvas，但在转换的过程中，发现存在内容空白、生成图片内容不全（只能截取一屏的内容，当出现滚动条时，不在滚动视区的部分不会被生成）的问题，于是转换成使用dom-to-Image，亲测好用且很轻量化（23Kb）

dom-to-Image的使用方法

• 安装

npm install dom-to-image

• 引入与使用

import domToImage from 'dom-to-image';

try { 
        const palGradientGap = document.getElementById(element)
        const canvas = document.createElement('canvas')
        canvas.width = palGradientGap.offsetWidth
        canvas.height = palGradientGap.offsetHeight;
        domToImage.toPng(palGradientGap).then(function (canvas) {
          const link = document.createElement('a')
          link.href = canvas
          link.download = 'image.png' // 下载文件的名称
          link.click()
          // 创建一个Blob对象，用于文件上传（可选，取决于后端是否需要Blob）  
          const blob = that.dataURLtoBlob(canvas);
          console.log(blob,'17951795');
          // 创建一个FormData对象，用于发送文件  
          const formData = new FormData(); 
          formData.append('image', blob, 'image.png'); // 'image'是后端期望的字段名，'image.png'是文件名  
        })
      } catch (error) {  
        console.error('Error capturing or uploading image:', error);  
      } 

文档gitHub地址如下

https://github.com/tsayen/dom-to-image