base64編碼的圖片數據在前端解析顯示共4步：1.使用atob()解碼base64字符串為二進制字符串，注意用try…catch處理異常；2.將二進制字符串轉換為arraybuffer再轉為uint8array以便訪問字節；3.利用arraybuffer創建blob對象并指定mime類型，如image/jpeg；4.通過url.createobjecturl生成臨時url賦值給img標簽src屬性完成顯示。同時可從base64頭部提取mime類型，或手動指定。arraybuffer和uint8array提供高效方式處理二進制數據，避免重復解碼可提升性能，大文件建議用web workers解碼。
Base64編碼的圖片數據，在前端JS中解析并顯示，其實沒那么神秘。核心就是將Base64字符串解碼成二進制數據，然后利用這些數據創建一個URL，最后把這個URL設置給標簽的src屬性。
4步完成Base64數據轉圖片顯示
-
解碼Base64字符串： 使用atob()函數將Base64字符串解碼成二進制字符串。這個函數是JavaScript內置的，非常方便。
function base64ToBinary(base64String) { return atob(base64String); }需要注意的是，atob()函數可能會拋出異常，比如當Base64字符串格式不正確時。所以，最好用try…catch包裹一下。
-
創建ArrayBuffer和Uint8Array： 將二進制字符串轉換為ArrayBuffer，然后再轉換為Uint8Array。ArrayBuffer代表原始的二進制數據緩沖區，Uint8Array則提供了對這些數據的更方便的訪問方式。
function binaryToArrayBuffer(binary) { const length = binary.length; const buffer = new ArrayBuffer(length); const view = new Uint8Array(buffer); for (let i = 0; i < length; i++) { view[i] = binary.charCodeAt(i); } return buffer; }這里，我們遍歷二進制字符串，將每個字符的Unicode編碼轉換為Uint8Array中的一個字節。
-
創建Blob對象： 使用ArrayBuffer創建一個Blob對象。Blob對象代表一個不可變的、原始數據的類文件對象。我們需要指定Blob的MIME類型，這通常包含在Base64字符串的頭部信息中。
function arrayBufferToBlob(buffer, mimeType) { return new Blob([buffer], { type: mimeType }); }MIME類型很重要，它告訴瀏覽器如何處理這些數據。常見的圖片MIME類型有image/jpeg、image/png等。
-
創建URL并顯示圖片： 使用URL.createObjectURL()方法為Blob對象創建一個URL，然后將這個URL賦值給
標簽的src屬性。
function displayImage(blob) { const imageUrl = URL.createObjectURL(blob); const img = document.createElement('img'); img.src = imageUrl; document.body.appendChild(img); // 或者添加到你想要的元素中 }URL.createObjectURL()創建的URL是臨時的，它只在當前文檔有效。當頁面卸載或者你不再需要這個URL時，應該調用URL.revokeObjectURL()來釋放資源。
如何從Base64字符串中提取MIME類型？
Base64字符串通常以data:[mime type];base64,開頭。我們可以使用正則表達式來提取MIME類型。
function getMimeTypeFromBase64(base64String) { const match = base64String.match(/^data:(.*?);base64,/); if (match && match[1]) { return match[1]; } return null; }
提取到MIME類型后，就可以將其傳遞給arrayBufferToBlob函數了。如果Base64字符串沒有包含MIME類型信息，你可能需要根據實際情況手動指定。
為什么需要ArrayBuffer和Uint8Array？
直接操作二進制數據是很麻煩的，ArrayBuffer和Uint8Array提供了一種更方便、更高效的方式來處理二進制數據。ArrayBuffer代表一塊連續的內存區域，而Uint8Array則允許我們以字節為單位訪問這塊內存。這對于處理圖像、音頻等二進制數據非常有用。沒有它們，你可能需要使用更底層、更復雜的API來操作二進制數據。
性能優化：避免重復解碼Base64字符串
如果需要多次使用同一個Base64字符串，避免重復解碼。解碼操作是比較耗時的，可以把解碼后的ArrayBuffer或者Blob對象緩存起來，下次直接使用。另外，如果Base64字符串非常大，考慮使用Web Workers在后臺線程中進行解碼，避免阻塞主線程。
