最近在做活动页，有个 H5 页面生成海报图片的功能，本来想着用后端做，但需要把前端代码传到后端，后端在解析生成图片，返回前端，但这么虽然可以，但太麻烦了，并且耗时，虽然感觉减轻了前端的工作量，但后端工作量很大。让后就去网上搜了一下 DOM 转 png，尝试找一找有没有这样的库，就找到了 html2canvas 这个库。
记录一下用法，以及遇到的坑及解决方式:
- 下载 npm i html2canvas 或 yarn add html2canvas
- 生成图片
productionImage() {
// 手动创建一个 canvas 标签
const canvas = document.createElement("canvas")
// 获取父标签，意思是这个标签内的 DOM 元素生成图片
let canvasBox = this.$refs.imageWrapper
// 获取父级的宽高
const width = parseInt(window.getComputedStyle(canvasBox).width)
const height = parseInt(window.getComputedStyle(canvasBox).height)
// 宽高 * 2 并放大 2 倍 是为了防止图片模糊
canvas.width = width * 2
canvas.height = height * 2
canvas.style.width = width + 'px'
canvas.style.height = height + 'px'
const context = canvas.getContext("2d");
context.scale(2, 2);
const options = {
backgroundColor: null,
canvas: canvas,
useCORS: true
}
html2canvas(canvasBox, options).then((canvas) => {
// toDataURL 图片格式转成 base64
let dataURL = canvas.toDataURL("image/png")
this.downloadImage(dataURL)
})
},
downloadImage(url) {
// 创建一个 img 标签，把图片插入到 DOM 中
// 这里使用 img 是因为在客户端中，不能直接下载，要调用原生的方法
const parents = this.$refs.selfReport
const createImg = document.createElement('img')
const insertEle = this.$refs.insetElement
parents.insertBefore(createImg,parents.childNodes[0])
createImg.setAttribute('src', url)
// 如果是在网页中可以直接创建一个 a 标签直接下载
let a = document.createElement('a')
a.href = url
a.download = '文件名'
a.click()
},
说一下遇到的问题
图片的跨域，如果生成的 DOM 元素中有包含图片，域名跟本地访问域名不一致的话，会出现跨域。
添加 useCORS: true , 但我发现还可能会有跨域问题，还有两种解决方式是: 直接后端返回的图片转成 base64 或者 把图片放到统一域名下画出来的图片有白色的边框
解决方式: 设置 backgroundColor: null 就可以了
把 H5 页面生成二维码，可以看我的另一个小文章 链接
其实很多场景下都是二维码+图片的方式，二者的顺序是先生成二维码，放到 DOM 中，在利用 html2canvas 把 DOM 生成图片。
最近发现一个小问题
我在网页中使用 html2canvas 时，即使使用的二倍图，将 canvas 放大两倍或者三倍之后，出现在效果还是模糊的一倍图，最后发现它好像和电脑屏幕的分辨率有关系，在自己 Mac 上和在扩展屏幕上生成的图片清晰度差了很多，解决方式: 就是在options 中写死 scale 的倍数。
