前端如何使用canvas绘图并保存图片到本地

前端如何使用canvas绘图并保存图片到本地

需求:

接近年底,又来活了,继支付宝推出年度报告之后,无数公司都在跟风

所以给我排了个活,就是做一个年度报告,然后根据一些数据对用户进行一个画像

最后用户能够保存他这个画像,然后分享啥的

思路:

1. 这个年度报告画像是一个千人千面的图片,而且图片都有用户的头像
2. 所以最后的图片只能在前端进行生成
3. 既然选择在前端生成就只能使用canvas进行绘制了
4. 绘制出来图片之后,用户保存就行了**(简简单单一句话,耗费我多少精血)**

操作:

• 项目比较老,之前选用的canvas插件是 html2canvas,所以还是用它啦

• 前面直接开始画静态页面,完事后进入主题,使用canvas绘制图片

• 

• 上面就是图片绘制的函数,第一个传入的参数是要绘制成图片的页面DOM节点

• 然后因为返回的是一个promise,所以记得同步接收一下const imgBase64 = await convertToImage(element);

• 那就得到了想要的图片,但是这个图片是一个base64的格式

• 可以把这个base64的图片打印出来,然后复制到浏览器地址栏,发现确实可行

如何将这个base64的图片保存到本地呢

1. 先理解一下本地这个概念
2. 移动端和pc端肯定不一样,我这里的应用是需要适配到移动端的App和微信小程序中的
3. 没办法,公司节约成本,一套代码,两个环境都要用

先看保存到pc端:

• 保存到pc算比较容易的,因为base64的图片可以转化成blob格式,然后通过a标签去访问就可以下载到本地了

• 

• 以上为转换过程和下载的过程

移动端:

1. 我们这个系统是一个H5页面,但是内嵌在我们的App里
2. 然后App提供了js-sdk,让我们有能力可以调用移动端的一些功能
3. 与微信很类似,但是生态是自己的生态
4. 其实不难,只是中间沟通成本太高,而且每个公司不一样,这里就不展示了
5. 大概就是调用移动端的SDK去下载文件,由于它刚好支持base64格式的,所以就直接传过去咯

微信小程序:

1. 我们这个系统的小程序其实使用就是套了个小程序的壳
2. 原理就是小程序提供的webview 将H5嵌入其中
3. 然后需要使用到小程序的方法的时候,就使用微信提供的一个js-sdk去调用小程序的一些方法
4. 然后这里如何能够让用户在小程序中保存绘制的图片呢?
   1. 小程序自身会有一个功能,如果是图片的话,长按会提示用户下载图片
   2. 但是由于UI风格要与H5一致,所以这个方案被否了
   3. 查了下小程序文档,js-sdk里面有wx.downloadImage 方法
   4. 这个就很坑,非常复杂,不仅前端处理起来麻烦,还需要将资源上传到微信的服务器上才行
   5. 有兴趣可以参考一下这个 https://www.yuque.com/docs/share/6c6d7e8b-bfb7-44c0-aa37-396f7cc9fd0d#
   6. 最后使用的方法是wx.previewImage()
   7. 用这个方法在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作

仅记录自己开发的心里路程,以上