html2canvas避坑心得

先来个github官方链接
https://github.com/niklasvh/html2canvas

顾名思义，这个库可以把HTML通过一些骚操作转换成canvas对象，进而形成图片，我就是这么粗浅的理解的。
而在实际项目需求中，有些需求，比如：将页面的一些关键内容导出成图片，然后让用户分享或保存到本地，方便、快捷，便于传播。
这里只记录一下我在写vue项目时，使用它遇到的坑。

// 1.安装

复制代码

npm i html2canvas -S

复制代码

// 2.在页面中引入

复制代码

import html2canvas from 'html2canvas'

复制代码

// 3. 使用

复制代码

html2canvas(document.body).then(canvas => {

复制代码

document.body.appendChild(canvas)

复制代码

})

复制代码

对于要转换的HTML元素，不能使用v-if指令。因为如果初始值是false，这个元素默认就不渲染，也就获取不到DOM对象。而在初始化时要传入被转化的DOM对象，所以会报错。
在vue中，获取DOM对象，可以在标签上加一个ref="container"属性，然后通过 this.$refs.container 获取后传给html2canvas函数。
假如有这样的需求：页面展示的只是一段资讯，当用户点击分享时，把这段资讯的标题和内容等填充到要生成海报的标签里（因为海报有定制化的样式）。我在尝试时发现，如果标签设置了display: none，visibility: hidden, height: 0 这些属性后，会导致生成的canvas是空白的，从而图片也是一片空白。
解决办法：
- 可以设置 opacity: 0 让元素不展示；
- 只设置opacity: 0 元素会占空间，可以使用定位，设置left/right让它偏移到视口之外
- 定位的话，不能用绝对定位absolute，这样会导致在转换canvas时不能正确的获取其内容的高度，使转换后的图片只有一部分
- 推荐：fixed。一是不占文档流，二是能正常获取到内容的高度
当正常转换成canvas后，发现生成的图片总有一个偏移量。在初始化时，可以传入一个options，通过设置scrollX，scrollY 解决。
为生成的图片设置宽高，不然会很难受
要转换的内容，如果有背景图片，生成图片后会比较模糊，推荐在标签里使用图片代替背景图
外部图片的跨域问题

// 完整代码

复制代码

const node = this.$refs.shareContainer

复制代码

const nW = node.offsetWidth

复制代码

const nH = node.offsetHeight

复制代码

html2canvas(node, {

复制代码

scrollX: 0,

复制代码

scrollY: 0

复制代码

}).then(canvas => {

复制代码

const image = new Image()

复制代码

image.style.width = nW + 'px'

复制代码

image.style.height = nH + 'px'

复制代码

image.style.display = 'block'

复制代码

image.src = canvas.toDataURL('image/png')

复制代码

this.$refs.imgBox.append(image)

复制代码

})

复制代码

其实用法很简单，所有的逻辑都是插件帮我们处理了，所以要感谢这些大佬！！

参考文章：

使用html2canvas在前端生成图片
https://www.jianshu.com/p/22bd5b98e38a