html2canvas 平坑文档

1.业务背景

移动端项目中经常会碰到截图或者拼接图片得需求，html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本：Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。

2.使用场景

如下图为项目中的使用场景，后端提供了一张海报的链接，弹框中生成海报和二维码拼接的图片（base64格式），然后把这个图片及进行保存或者分享

3.使用方法

（1）步骤一

保存通过 html2canvas 将页面内元素绘制到 canvas,然后将 canvas 转成 base64 数据,再调用 sdk 提供的保存图片方法,保存时需要判断系统,若是 ios 系统需要将 base64Url 中的图像类型字段去除才能正常保存（如果是hybird混合开发的场景，直接调用jsbridge提供的方法即可）

（2）步骤二

指定渲染范围和节点名称，执行插件的渲染操作，内部节点排布可根据需求修改

（3）步骤三

渲染成功之后加载成型之后的img 图片，隐藏画布的节点

4. 常见问题

将图片绘制到 canvas 时存在跨域问题(具体可以查看 使用 html2canvas 在前端生成图片),不做处理会出现保存的图片内不存在海报和顾问头像的清空

（1）图片加载不出来或者渲染区域白屏

原因：

这里的主要原因是因为canvas画图的 image方法不支持的跨域图片的加载

解决办法：

需要在不同域的图片(海报)的 url 上加上一个随机字符串(这里使用当前的时间戳),这是为了防止浏览器读取缓存的图片

同时在 img 标签上添加 crossorigin 属性,设置为 anonymous

并在调用 html2canvas 时将 useCORS 设为 true ， 这里的scale也可以设置缩放

同时图片的服务器也必须支持跨域

（2）图片挂载方法未执行

原因: 插件执行的时候没有找到dom 节点

解决方法:

渲染的时候要确认节点已经被加载完成 所以使用 nextTick 方法

（3）渲染节点图片不完整

原因:插件转换需要时间

解决方法: 添加一个延时器

（4）在弹框内部渲染的时候会在弹框展开收起的时候出现头部留白

原因：渲染的节点会把body 当作参考元素 所以会把 滚轴高度也带上去

解决办法：在展开收起的执行渲染方法之前来重置 滚轴高度