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 字符串本身的长度。

What is a base64 length in bytes?

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

Answer 3

如果您对（非常好的）估计没问题，文件大小是 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 4

这是基于.

的所有类型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);

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

Image file size from data URI in JavaScript

javascript

data-uri