問題描述
我們在將App中嵌入的H5頁面中的圖片通過App端原生分享到微信，H5端拼接生成的圖片通過Base64編碼傳參給App端，編碼后的Base64圖片無法通過下面方案一進(jìn)行解碼，Base64字符串解碼成NSData為nil，但在瀏覽器上通過Base64圖片解碼工具(站長工具-圖片Base64編解碼)可以正常顯示圖片，由此判斷H5端base64編碼沒有問題，應(yīng)該是App端解碼的問題，后經(jīng)查資料探索，通過下面的方案二可以解碼成功。
解決思路
正常解碼思路（方案一）：
/// base64字符串轉(zhuǎn)圖片
/// @param base64String 圖片base64字符串
- (UIImage *)imageWithBase64String:(NSString *)base64String {
NSData *imageData = [[NSData alloc] initWithBase64EncodedString:base64String options:NSDataBase64DecodingIgnoreUnknownCharacters];
UIImage *image = [UIImage imageWithData:imageData];
return image;
}
DataURL解碼（方案二）：
/// base64字符串轉(zhuǎn)圖片
/// @param base64String 圖片base64字符串
- (UIImage *)imageWithBase64String:(NSString *)base64String {
NSURL *URL = [NSURL URLWithString:base64String];
NSData *imageData = [NSData dataWithContentsOfURL:URL];
UIImage *image = [UIImage imageWithData:imageData];
return image;
}
問題分析
H5端將圖片轉(zhuǎn)為Base64編碼，是利用canvas.toDataURL()函數(shù)轉(zhuǎn)換的：
dataURL = canvas.toDataURL('image/png'); //轉(zhuǎn)換圖片為dataURL,轉(zhuǎn)換后為Base64格式
所以我們對應(yīng)的解碼也應(yīng)該先把Base64字符串當(dāng)做dataURL解碼成URL，再轉(zhuǎn)換為圖片（解碼方案二）。
總結(jié)
下次我們需要將Base64編碼的圖片還原成圖片，首先需要弄清之前的圖片是怎么轉(zhuǎn)換成Base64的，我們再相應(yīng)的去解碼處理。如果不清楚原始圖片的編碼過程，我們可以先按照上面的方案一去嘗試，如果轉(zhuǎn)換失敗，可以再嘗試一下方案二，或者再探索探索其他的解決方案。
