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);