一、根据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