基于JavaScript獲取base64圖片大小
更新時間：2019年10月18日 17:01:42 作者：Michelyuan
這篇文章主要介紹了基于JavaScript獲取base64圖片大小,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
base64原理
Base64編碼要求把3個8位字節(jié)（38=24）轉化為4個6位的字節(jié)（46=24），之后在6位的前面補兩個0，形成8位一個字節(jié)的形式。 如果剩下的字符不足3個字節(jié)，則用0填充，輸出字符使用'='，因此編碼后輸出的文本末尾可能會出現(xiàn)1或2個'='
如何獲取base64圖片大小
通過base64編碼原理我們知道，base64的圖片字符流中的每8個字符就有兩個是用0補充，而且字符流的末尾還可能存在‘='號，我們可以通過這個原理計算圖片的文件流大小。
getImgByteSize(data) {
if (data.graphicContents) { // 獲取base64圖片byte大小
const equalIndex = data.graphicContents.indexOf('='); // 獲取=號下標
if (equalIndex > 0) {
const str = data.graphicContents.substring(0, equalIndex); // 去除=號
const strLength = str.length;
const fileLength = strLength - (strLength / 8) * 2; // 真實的圖片byte大小
data.size = Math.floor(fileLength); // 向下取整
} else {
const strLength = data.graphicContents.length;
const fileLength = strLength - (strLength / 8) * 2;
data.size = Math.floor(fileLength); // 向下取整
}
} else {
data.size = null;
}
}
data.graphicContents是后端獲取的base64圖片的字符串。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了 微信小程序getPhoneNumber獲取用戶手機號的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了微信小程序 監(jiān)聽手勢滑動切換頁面實例詳解的相關資料,需要的朋友可以參考下2017-06-06
微信小程序之MaterialDesign--input組件詳解
本篇文章主要介紹了微信小程序之MaterialDesign--input組件詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-02-02
這篇文章主要介紹了微信小程序 條件渲染詳解的相關資料,需要的朋友可以參考下2016-10-10
JavaScript數(shù)組對象高階函數(shù)reduce的妙用詳解
這篇文章主要為大家介紹了JavaScript數(shù)組對象高階函數(shù)reduce的妙用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了微信小程序中的swiper組件詳解的相關資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了JS前端使用canvas實現(xiàn)物體的點選示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了TypeScript 枚舉類型，TypeScript 在 ES 原有類型基礎上加入枚舉類型，使得在 TypeScript 中也可以給一組數(shù)值賦予名字，這樣對開發(fā)者比較友好，可以理解枚舉就是一個字典，文章內(nèi)容圍繞TypeScript 枚舉類型展開內(nèi)容,需要的朋友可以參考一下2021-10-10
如果要編寫出高質(zhì)量的 JavaScript 代碼，可以從以下三個方面去考慮。分別是：易閱讀的代碼、高性能的代碼、健壯性的代碼。下面我將分別對這三個方面進行闡述。需要的朋友可以參考一下2021-09-09
這篇文章主要介紹了JavaScript的提攜小技巧，如：過濾唯一值、短路求值、轉換Boolean型等等，想詳情了解的小伙伴請參考下面文章的具體內(nèi)容2021-09-09