两种将dom转为图片img的方式

需求常出现场景：

1. 生成截图
2. 导出图片
3. 可视化

一、使用 HTML2Canvas 库

html2canvas 是一个非常流行的 JavaScript 库，可以将 DOM 元素渲染为 Canvas，然后可以将 Canvas 转化为图片。

// 1、安装 html2canvas
npm install html2canvas

// 2、使用 html2canvas
import html2canvas from 'html2canvas' // 引入html2canvas库，等会要用

const element = document.getElementById('your-element-id') // 获取到要转为图片的dom

html2canvas(element).then(canvas => { // 使用html2canvas库，将dom转为canvas
  const imgData = canvas.toDataURL('image/png') // toDataURL是canvas API的一个方法，将canvas上的内容转为Data URL格式的图像，包含了图像的二进制数据，并以Base64编码形式表现
  const img = new Image() // 创建一个图片元素对象
  img.src = imgData // 将该图片元素对象的src绑定刚刚的二进制数据
  document.body.appendChild(img) // 展示图片
})

二、使用 Canvas 手动绘制

如果你需要更细粒度的控制，可以手动将 DOM 元素的内容绘制到 Canvas 上，再将canvas转为图片

//  1、创建 Canvas 元素
const canvas = document.createElement('canvas') // 创建一个canvas元素对象
const ctx = canvas.getContext('2d') // 获取canvas的上下文

// 2、测量 DOM 元素的尺寸
const element = document.getElementById('your-element-id') // 获取到要转为图片的dom
const rect = element.getBoundingClientRect() // 获取该dom的大小
canvas.width = rect.width // 获取该dom的宽，并设置为canvas的宽
canvas.height = rect.height // 获取该dom的高，并设置为canvas的高

// 3、将 DOM 元素绘制到 Canvas 上
ctx.drawImage(element, 0, 0) // 将dom对象绘制到canvas上面

// 4、将 Canvas 转化为图片
const imgData = canvas.toDataURL('image/png') // toDataURL是canvas API的一个方法，将canvas上的内容转为Data URL格式的图像，包含了图像的二进制数据，并以Base64编码形式表现
const img = new Image() // 创建一个图片元素对象
img.src = imgData // 将该图片元素对象的src绑定刚刚的二进制数据
document.body.appendChild(img) // 展示图片