移动端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

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

上一篇:APP https抓包


下一篇:H5页面移动端兼容性测试