方案梳理
1棍厌、前端直接保存盆繁，這樣直接跨過跟原生app的橋接交互
2掀淘、橋接到原生，使用原生能力保存改基。傳輸圖片數(shù)據(jù)使用base64數(shù)據(jù)
前端保存
save() {
html2canvas(this.$refs.saveImage, {
allowTaint: false, // 是否允許跨域圖像污染畫布
useCORS: true, // 使用CO RS從服務(wù)器加載圖像繁疤，必須為true否則img圖片可能顯示不出來
x: 裁剪畫布x坐標(biāo),
y: 裁剪畫布y坐標(biāo)
}).then(canvas => {
// 點(diǎn)擊保存操作
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：手機(jī)端不能使用a標(biāo)簽下載圖片
橋接客戶端保存
客戶端保存，就需要前端把圖片數(shù)據(jù)傳過來我衬，首先前端需要生成圖片數(shù)據(jù)叹放，然后傳輸數(shù)據(jù)
- 前端生成圖片
推薦 html2canvas饰恕，具體使用搜github就行了
- 傳輸有幾種方式：
1、byte[] 數(shù)組
2井仰、字節(jié)流
3埋嵌、base64
html2canvas
注意點(diǎn)：由于是前端頁面，圖片保存場景有：
- 瀏覽器上直接保存
- 三方app的保存：如微信俱恶，qq等
- 自己app客戶端的保存雹嗦，這個使用橋接
具體使用，遇到的問題等最好還是查看htmlconvas官方issues
byte[]
字節(jié)流
base64
這個也是html2canvas生成的合是，html2canvas.toDataUrl()了罪，返回的就是base64數(shù)據(jù)，直接橋接傳給原生就行了
原生保存處理
原生保存聪全，拿到橋接傳過來的數(shù)據(jù)泊藕，工具類具體解析生成圖片保存就行了
android
將數(shù)據(jù)轉(zhuǎn)bitmap保存即可
base64數(shù)據(jù)
byte[] bitmapArray = Base64.decode(base64, Base64.DEFAULT);
Bitmap bitmap = BitmapFactory.decodeByteArray(bitmapArray, 0, bitmapArray.length);
生成的bitmap為空 或 bad base-64
base64 數(shù)據(jù)不要帶 data:image/jpeg;base64, 數(shù)據(jù)頭，用純正的base64數(shù)據(jù)去解析难礼，這個還取決于Base64.decode(base64, Base64.DEFAULT)解碼的時候入?yún)⒌膄lag
https://blog.csdn.net/yuemitengfeng/article/details/107067128
圖片缺失問題
android端保存的圖片缺一塊
測試android娃圆，ios 拿到的base64數(shù)據(jù)轉(zhuǎn)換圖片正常，確定為前端生成圖片的問題
頁面內(nèi)二維碼是url請求到的鹤竭，所以踊餐，要注意兩個問題，一是圖片跨域問題臀稚，二是htmlconvas生成圖片的時候網(wǎng)絡(luò)圖片沒有渲染出來
iOS
基本上沒啥問題，這也奇怪三痰，前端同樣的處理吧寺，ios正常，android異常
要注意一下base64轉(zhuǎn)圖片的時候也要把data:image/jpeg;base64,去掉
奇怪的是前端同樣的處理散劫，ios端正常稚机，android異常，請大佬指教
