移动端js模拟截屏生成图片并下载功能的实现方案

 

一、根据PM需求如下：

移动端wap 实现将二维码生成图片下载至用户手机相册保存

 

二、根据现有思路：

1、使用第三方工具html2canvas，将页面中指定范围的dom转换为canvas

2、随后使用canvas的apitoDataUrl获得base64格式的图片数据

3、此时试着直接用a标签下载

<a href="base64Url" download="name.jpg"></a>

　　

三、经过尝试，发现在wap端无法完美实现，原因：

1、H5现有的 download 属性，不同浏览器的支持有差别，chrome 和 firefox是支持比较好的

2、前端js生成的时base64格式的图片数据，移动端无法直接下载，（pc端的chrome 和 firefox 貌似可以）

 

四、修正思路：

1、将base64转换成blob，再模拟一个表单对象，将blob放进去，使用post提交给后端

2、图片传输至后端保存，并返回图片服务器地址

3、拿到服务器地址后，再来尝试a标签下载：

4、根据手机系统，经过实测：

 a、IOS系统UC上，直接打开了图片地址（如果图片地址与项目地址不同源，可能还会出现提示）

 b、Android系统UC上，可以直接下载

5、优化IOS，放弃a标签的方案，变为添加一个弹出层，展示该图片，提示用户长按下载，至此比较完美的实现了该功能

 

参考：https://juejin.im/post/5c415691e51d45518d46eb9c