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

Question

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

例如,假设有一个IMG元素src:

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;

这避免了解析整个字符串，并且除非您正在寻求微优化或内存不足，否则这完全是多余的。