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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM