前端保存圖片到手機 方案梳理 前端保存 橋接客戶端保存 原生保存處理

方案梳理

1、前端直接保存，這樣直接跨過跟原生app的橋接交互

2、橋接到原生，使用原生能力保存。傳輸圖片數據使用base64數據

前端保存

save() {
                html2canvas(this.$refs.saveImage, {
                    allowTaint: false, // 是否允許跨域圖像污染畫布
                    useCORS: true, // 使用CO RS從服務器加載圖像，必須爲true否則img圖片可能顯示不出來
                    x: 裁剪畫布x座標,
                    y: 裁剪畫布y座標
                }).then(canvas => {
                    // 點擊保存操作
                    const link = document.createElement('a')
                    link.href = canvas.toDataURL()
                    link.setAttribute('download', 圖片名 + '.png')
                    link.style.display = 'none'
                    document.body.appendChild(link)
                    link.click()
                })
            }

瀏覽器測試，微信，qq等客戶端測試，，保存不成功，，

Q:const link = document.createElement('a')
A：手機端不能使用a標籤下載圖片

橋接客戶端保存

客戶端保存，就需要前端把圖片數據傳過來，首先前端需要生成圖片數據，然後傳輸數據

• 前端生成圖片

推薦 html2canvas，具體使用搜github就行了

• 傳輸有幾種方式：

1、byte[] 數組

2、字節流

3、base64

html2canvas

注意點：由於是前端頁面，圖片保存場景有：

• 瀏覽器上直接保存
• 三方app的保存：如微信，qq等
• 自己app客戶端的保存，這個使用橋接

具體使用，遇到的問題等最好還是查看htmlconvas官方issues

byte[]

字節流

base64

這個也是html2canvas生成的，html2canvas.toDataUrl()，返回的就是base64數據，直接橋接傳給原生就行了

原生保存處理

原生保存，拿到橋接傳過來的數據，工具類具體解析生成圖片保存就行了

android

將數據轉bitmap保存即可

base64數據

byte[] bitmapArray = Base64.decode(base64, Base64.DEFAULT);
Bitmap bitmap = BitmapFactory.decodeByteArray(bitmapArray, 0, bitmapArray.length);

生成的bitmap爲空 或 bad base-64

base64 數據不要帶 data:image/jpeg;base64, 數據頭，用純正的base64數據去解析，這個還取決於Base64.decode(base64, Base64.DEFAULT)解碼的時候入參的flag

https://blog.csdn.net/yuemitengfeng/article/details/107067128

圖片缺失問題

android端保存的圖片缺一塊

測試android，ios 拿到的base64數據轉換圖片正常，確定爲前端生成圖片的問題

問題參考資料

頁面內二維碼是url請求到的，所以，要注意兩個問題，一是圖片跨域問題，二是htmlconvas生成圖片的時候網絡圖片沒有渲染出來

iOS

基本上沒啥問題，這也奇怪，前端同樣的處理，ios正常，android異常

要注意一下base64轉圖片的時候也要把data:image/jpeg;base64,去掉

奇怪的是前端同樣的處理，ios端正常，android異常，請大佬指教