分享一个dom生成 图片的接口 html-to-image

前言

最近遇到一个需求 使用当前的页面的某个dom的区域生成一个封面 于是就在各种插件中的寻找 最后确定到 html-to-image

官方连接
gitee连接: https://gitee.com/mirrors/html-to-image
github连接: https://github.com/bubkoo/html-to-image#readme

官网给使用方法也是比较详细 我这边就不废话了，我主要使用的生成的toBlob方法
记录一下

一、装包

npm install --save html-to-image

二、组件中使用

import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';



htmlToImage.toBlob(document.getElementById('domId'))
  .then(function (blob) {
 		// 这里生成的是一个blob类型 如果要使用普通的文件上传 需要转换一下
 		// 使用formData 包一下 并且一个文件名称加上后缀  就可以实现一个普通的文件上传
 		let formData = new FormData()
        formData.append('file', blob, Math.random()*100 +'a.png')
  });

插件遇到问题 (欢迎留言讨论 给出解决方式):

1. 里面有行内样式报错 (不影响使用)
2. 外部引入的字体也会报错

js dom 生成图片各种插件的优缺点 （来子知乎）
https://zhuanlan.zhihu.com/p/645363896?utm_id=0

项目遇坑

刚开始与后端协定 想使用生成的base64 来存储封面 后来在测试的时候 明显感觉到查询效率的下降， 后来还是准备使用普通的文件上传