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