使用html2canvas在前端生成图片

技术选型

要在前端生成图片，自然会想到使用Canvas来做。

1. 自己封装Canvas API
2. 使用开源库，如 html2canvas

方案一开发、维护成本较高，并且 html2canvas 已经比较成熟稳定了，所以选择方案二。

html2canvas的基本介绍

该脚本允许您直接在用户浏览器上拍摄网页或部分网页的"截图"。屏幕截图基于 DOM，因此可能无法 100% 准确到真实表示，因为它不会进行实际屏幕截图，而是根据页面上提供的信息构建屏幕截图。

官方文档

使用

安装

npm install html2canvas

只需调用 html2canvas(element, options) 如：

import html2canvas from 'html2canvas'
/**
 * 导出图表
 * @param {Element} dom 要保存为图片的DOM节点
 */
html2canvas(dom).then(canvas => {
  const imgUrl = canvas.toDataURL()
  const a = document.createElement('a')
  a.href = imgUrl
  a.download = '图片名字'
  a.click()
})

更多关于options的配置请查看官方文档