JavaScript 中來自數據 URI 的圖像文件大小

Question

我不確定這是否可能，但是 - 我可以從數據 URI 中獲取圖像文件大小嗎？

例如，假設有一個src所在的 IMG 元素：

src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...

基於src ，我可以使用純 JavaScript 獲取圖像文件大小嗎？ （沒有服務器請求）

Answer 1

如果您想要文件大小，只需解碼您的 base64 字符串並檢查長度。

 var src ="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP/// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"; var base64str = src.substr(22); var decoded = atob(base64str); console.log("FileSize: " + decoded.length);

Answer 2

如果您接受（非常好的）估計，則文件大小是 base64 字符串大小的 75%。 真實大小不大於此估計值，最多小兩個字節。

如果您想寫一行並完成它，請使用atob()並檢查長度，就像在其他答案中一樣。

如果您想要具有最高性能的准確答案（在巨大文件或數百萬個文件或兩者的情況下），請使用估計值但考慮填充以獲得確切大小：

let base64Length = src.length - (src.indexOf(',') + 1);
let padding = (src.charAt(src.length - 2) === '=') ? 2 : ((src.charAt(src.length - 1) === '=') ? 1 : 0);
let fileSize = base64Length * 0.75 - padding;

這避免了解析整個字符串，並且完全是矯枉過正，除非您正在尋找微優化或內存不足。

Answer 3

您最好的選擇是計算 base64 字符串本身的長度。

什么是 base64 長度（以字節為單位）？

您必須使用atob()將 base64 字符串轉換為普通字符串，然后檢查它的長度，它將返回一個您可以說接近圖像實際大小的值。 此外，您不需要數據 URI 中的data:image/jpeg;base64,部分來檢查大小。

Answer 4

這是基於Daniel Trans 代碼的所有類型 base64 字符串的通用解決方案。

var src ="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP/// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";

var base64str = src.split('base64,')[1];
var decoded = atob(base64str);

console.log("FileSize: " + decoded.length);

Answer 5

其他解決方案使用了現在已被棄用的 atob。 這是一個使用 Buffer 代替的最新示例。

const src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...";
const base64str = src.split('base64,')[1]; //remove the image type metadata.
const imageFile = Buffer.from(base64str, 'base64'); //encode image into bytes
console.log('FileSize: ' + imageFile.length);