基于JavaScript獲取base64圖片大小
更新時間：2019年10月18日 17:01:42 作者：Michelyuan
這篇文章主要介紹了基于JavaScript獲取base64圖片大小,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
base64原理
Base64編碼要求把3個8位字節(jié)（38=24）轉(zhuǎn)化為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('='); // 獲取=號下標(biāo)
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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹JS數(shù)組去重，關(guān)于去重實際應(yīng)用中，最常用的方法就是使用Set，也可以使用第三方庫lodash來處理，下面一起來看看文章是怎么介紹JS數(shù)組去重的2021-11-11
這篇文章主要為大家介紹了js面試題繼承的方法及優(yōu)缺點解答，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
JavaScript版代碼高亮...2006-06-06
這篇文章主要介紹了如何發(fā)布TypeScript編寫的npm包實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了前端算法leetcode49-字母異位詞分組解題示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
Umi4集成阿里低代碼框架lowcode-engine實現(xiàn)
這篇文章主要為大家介紹了Umi4集成阿里低代碼框架lowcode-engine實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
微信小程序 免費SSL證書https、TLS版本問題的解決辦法
這篇文章主要介紹了微信小程序 免費SSL證書https、TLS版本問題的解決辦法的相關(guān)資料,需要的朋友可以參考下2016-12-12
將HTML自動轉(zhuǎn)為JS代碼...2006-06-06
這篇文章主要介紹了微信小程序 教程之wxapp 視圖容器 view的相關(guān)資料,需要的朋友可以參考下2016-10-10
JavaScript 運行機制詳解再淺談Event Loop
這篇文章主要介紹了JavaScript 運行機制詳解及淺談了Event Loop，感興趣的小伙伴可以和小編一起閱讀下面文章的具體內(nèi)容2021-09-09