base64轉(zhuǎn)二進(jìn)制碼流問題記錄
在前端項(xiàng)目中苍在，經(jīng)常會(huì)遇到前端使用html2canvas將界面轉(zhuǎn)換成圖片弥鹦，同時(shí)可能會(huì)將截取的圖片傳送到服務(wù)端進(jìn)行保存母怜，此時(shí)會(huì)有一個(gè)問題存在：
html2canvas截取到的圖片為base64編碼掷倔，文件長度非常大啊奄，在傳輸給服務(wù)端進(jìn)行保存時(shí)纬朝，會(huì)存在傳輸上的延遲收叶，所以需要轉(zhuǎn)換成二進(jìn)制碼流進(jìn)行傳輸
具體實(shí)現(xiàn)如下：
let formData = new FormData();
let blobData = this.convertBase64UrlToBlob(dataUrl2); //將base64轉(zhuǎn)換成二進(jìn)制blol流數(shù)據(jù)
formData.append('file', blobData); //將二進(jìn)制流放入formData中
/**
* 將以base64的圖片url數(shù)據(jù)轉(zhuǎn)換為Blob
* @param urlData
*/
convertBase64UrlToBlob： function(urlData) {
var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type: mime});
}
用這種方法就可以實(shí)現(xiàn)將base64轉(zhuǎn)換成二進(jìn)制流，然后調(diào)用服務(wù)端接口將圖片傳送到服務(wù)端進(jìn)行圖片可訪問鏈接的生成
