Question

我不确定它是否可能但是 - 我可以从数据URI中获取图像文件大小吗？

例如，让我们说有一个src所在的IMG元素：

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

基于src，我可以使用纯JavaScript获取图像文件大小吗？（没有服务器请求）

Answer 1

如果你想要文件大小，只需解码你的base64字符串并检查长度。

＆＃13;

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

＆＃13;

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

这是基于Daniel Trans's code的所有类型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 4

您最好的选择是计算base64字符串本身的长度。

What is a base64 length in bytes?

您必须使用atob()将base64字符串转换为普通字符串，然后检查它的长度，它将返回一个值，您可以说它接近图像的实际大小。此外，您不需要数据URI中的data:image/jpeg;base64,部分来检查大小。

JavaScript中数据URI的图像文件大小

4 个答案: