最近开发上线一个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转换成图片数据,然后可保存下载。
- 保存到手机相册并分享微信
- 遇到的问题
- 图片生成的时间长
第一个环节-html2canvas,配置 ignoreElements 函数或者在DOM上增加data-html2canvas-ignore属性,去除冗余的DOM,其次精简需要渲染的DOM范围,
第二个环节-canvas to Blob,提前生成blob,上传到后台,获取在线url,增加缓存在线地址。
2.报错errcode 1009
生成的图片地址为本地地址,所以在上线以后保存下载会报错,下载不下来,解决方案是把图片提前上传到服务器,在线图片下载则不会出现此问题。