JavaScript 可以通过获取图片的 base64 编码并计算其大小来计算图片大小。

方法一:

// 计算base64编码图片大小
function getBase64ImageSize(base64) {
	if (base64) {
		base64 = base64.split(",")[1].split("=")[0];
		var strLength = base64.length;
		var fileLength = strLength - (strLength / 8) * 2;
		return Math.floor(fileLength);
	} else {
		return null
	}
}

方法二:

// 计算base64编码图片大小
function getBase64ImageSize(base64) {
	const indexBase64 = base64.indexOf('base64,');
	if (indexBase64 < 0) return -1;
	const str = base64Str.substr(indexBase64 + 6);
	// 大小单位:字节
	return (str.length * 0.75).toFixed(2);
}

 方法三:

可以使用 atob() 函数将 base64 编码转换为二进制字符串,然后使用 length 属性获取字符串的长度。最后除以 8 得到字节数。

下面是一个示例函数,它接收一个 base64 图像字符串并返回其大小(以字节为单位):

function getBase64ImageSize(base64) {
    let str = atob(base64.split(',')[1]);
    let bytes = str.length;
    return bytes;
}

如果要获得KB的就除以1024

function getBase64ImageSizeInKB(base64) {
    let bytes = getBase64ImageSize(base64);
    let sizeInKB = bytes / 1024;
    return sizeInKB;
}

此函数首先使用 atob()base64 字符串转换为二进制字符串。 然后使用该字符串的 length 属性获取字符串的长度,即字节数。

在使用此函数之前,请确保浏览器支持 atob() 函数。 在旧版本的浏览器中,可能需要使用其他库来代替这个函数。

需要注意的是,base64 编码不仅增加了图像大小,而且还增加了约 33% 的额外大小。这是因为 base64 编码是一种用于将二进制数据转换为字符串形式的编码方法,其中每 6 个二进制位被编码为一个字符。这意味着,任何图像的大小都将增加至少 33%,这是一个需要考虑的因素。

另外, 如果需要更精确的大小,应该从原始图像中获取元数据,如图像的高度、宽度和每个像素的位深度等信息来计算其大小,而非使用base64大小。