前端如何使用canvas绘图并保存图片到本地
需求:
接近年底,又来活了,继支付宝推出年度报告之后,无数公司都在跟风
所以给我排了个活,就是做一个年度报告,然后根据一些数据对用户进行一个画像
最后用户能够保存他这个画像,然后分享啥的
思路:
- 这个年度报告画像是一个千人千面的图片,而且图片都有用户的头像
- 所以最后的图片只能在前端进行生成
- 既然选择在前端生成就只能使用canvas进行绘制了
- 绘制出来图片之后,用户保存就行了**(简简单单一句话,耗费我多少精血)**
操作:
- 项目比较老,之前选用的canvas插件是 html2canvas,所以还是用它啦
- 前面直接开始画静态页面,完事后进入主题,使用canvas绘制图片
- 上面就是图片绘制的函数,第一个传入的参数是要绘制成图片的页面DOM节点
- 然后因为返回的是一个promise,所以记得同步接收一下
const imgBase64 = await convertToImage(element);
- 那就得到了想要的图片,但是这个图片是一个base64的格式
- 可以把这个base64的图片打印出来,然后复制到浏览器地址栏,发现确实可行
如何将这个base64的图片保存到本地呢
- 先理解一下本地这个概念
- 移动端和pc端肯定不一样,我这里的应用是需要适配到移动端的App和微信小程序中的
- 没办法,公司节约成本,一套代码,两个环境都要用
先看保存到pc端:
- 保存到pc算比较容易的,因为base64的图片可以转化成blob格式,然后通过a标签去访问就可以下载到本地了
- 以上为转换过程和下载的过程
移动端:
- 我们这个系统是一个H5页面,但是内嵌在我们的App里
- 然后App提供了js-sdk,让我们有能力可以调用移动端的一些功能
- 与微信很类似,但是生态是自己的生态
- 其实不难,只是中间沟通成本太高,而且每个公司不一样,这里就不展示了
- 大概就是调用移动端的SDK去下载文件,由于它刚好支持base64格式的,所以就直接传过去咯
微信小程序:
- 我们这个系统的小程序其实使用就是套了个小程序的壳
- 原理就是小程序提供的webview 将H5嵌入其中
- 然后需要使用到小程序的方法的时候,就使用微信提供的一个js-sdk去调用小程序的一些方法
- 然后这里如何能够让用户在小程序中保存绘制的图片呢?
- 小程序自身会有一个功能,如果是图片的话,长按会提示用户下载图片
- 但是由于UI风格要与H5一致,所以这个方案被否了
- 查了下小程序文档,js-sdk里面有wx.downloadImage 方法
- 这个就很坑,非常复杂,不仅前端处理起来麻烦,还需要将资源上传到微信的服务器上才行
- 有兴趣可以参考一下这个 https://www.yuque.com/docs/share/6c6d7e8b-bfb7-44c0-aa37-396f7cc9fd0d#
- 最后使用的方法是wx.previewImage()
- 用这个方法在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作
仅记录自己开发的心里路程,以上