html2canvas实现将html转换为图片app保存并微信分享

最近开发上线一个app用户生成海报保存图片到本地并分享图片到微信好友。因为在app环境下，所以选择了html2canvas来分享海报。

html2canvas介绍

  html2canvas是一个比较成熟的开源库，它能将dom转化为canvas，省去了使用原生canvas一点一点去绘制。

• 下载html2canvas（安装依赖）

 npm install html2canvas -S

• 在vue中使用html2canvas

• 常用配置项

参数	类型	默认值	描述
allowTaint	boolean	false	是否允许跨域图像污染画布
useCORS	boolean	false	是否跨域加载图片
backgroundColor	string	#fff	背景色
width	number	元素宽度	单元格
height	number	元素高度	单元格
scale	number	window.devicePixelRatio	缩放比例
scrollX	number	元素x轴滚动位置	生成后x轴滚动位置
scrollY	number	元素y轴滚动位置	生成后y轴滚动位置

• html2canvas绘制跨域图片

然limg标签需要添加crossorigin="anonymous"

• 生成地址

在内存中生成我们所需要的canvas对象，然后利用canvas的api toDataUrl和toBlob转换成图片数据，然后可保存下载。

• 保存到手机相册并分享微信

• 遇到的问题

1. 图片生成的时间长

第一个环节-html2canvas，配置 ignoreElements 函数或者在DOM上增加data-html2canvas-ignore属性，去除冗余的DOM，其次精简需要渲染的DOM范围，

第二个环节-canvas to Blob，提前生成blob，上传到后台，获取在线url，增加缓存在线地址。

     2.报错errcode 1009

生成的图片地址为本地地址，所以在上线以后保存下载会报错，下载不下来，解决方案是把图片提前上传到服务器，在线图片下载则不会出现此问题。