如果src是base64字符串，如何获取新创建的Image()的文件大小？

Question

如果该图像的

new Image()

是

src

数据图像，如何获取新创建的

base64

的大小（以字节为单位）？

我有这样的coffeescript代码：

# This string is received after some original image preprocessing
base64String = "data:image/jpeg;base64......"

newImageObj = new Image()
newImageObj.src = base64String
newImageObj.onload = ->
  console.log "Resized image width is " + this.width
  console.log "New file size in bytes is " + newImageObj.fileSize

输出总是这样的：

Resized image width is 500
New file size in bytes is undefined

这个

newImageObj.fileSize

始终是

undefined

。

Answer 1

这是从 Base64 字符串查找文件大小的算法：

base64String = "data:image/jpeg;base64......";

var stringLength = base64String.length - 'data:image/png;base64,'.length;

var sizeInBytes = 4 * Math.ceil((stringLength / 3))*0.5624896334383812;
var sizeInKb=sizeInBytes/1000;

 

Answer 2

我个人会使用类似的方法来执行上述操作，在数据格式不正确的情况下（例如，缺少“=”，通常无论如何都会正确解码），它将正常工作

new Buffer(base64String, 'base64').length

Answer 3

我在这里问这个问题有点晚了，也许我错了，但是......

查看上面的代码，看起来您正在定义一个函数并使用箭头表示法返回答案。但是，箭头后面有两行，并且它们没有以任何方式分组，因此...箭头表示法仅将 onload() 的值返回到第一个 log() 。所以“这个”实际上是有价值的。但第二个 log() 完全是一个新命令，对吧？它没有从 onload() 返回。所以 newImageObj 是未定义的。

或者可能是coffescript语法，我不熟悉它。这样可以解决吗？

newImageObj = new Image()
newImageObj.src = base64String
newImageObj.onload = ->
{
  console.log "Resized image width is " + this.width
  console.log "New file size in bytes is " + newImageObj.fileSize
}

Answer 4

您可以参考这个例子，看看base64解码是如何工作的：

---

我还附上了对 Base64 表的引用。

解码->base64字符串：QWJoaXNoZWs=

---

1. 首先，您需要将字符串逐字符拆分。因此，您有 12 个组： 问 瓦 J 哦 A X 氮 哦 Z 瓦 s =

2. 每个组（字符）都是一个具有自己索引的 Base64 字符，现在您的任务是将组转换为索引。为此，通过映射 Base64 字符表中的值，用其索引替换每个字符（如果找不到特定组的索引，只需丢弃它）。总而言之，您应该获得以下指数： 16 22 9 40 26 23 13 40 25 22 44

3. 在此步骤中，您应该将每个组从十进制转换为二进制。因此，在 ASCII 表中找到相应的十进制值，并确保获得以下二进制值： 00010000 00010110 00001001 00101000 00011010 00010111 00001101 00101000 00011001 00010110 00101100

4. 现在删除每组前面的前缀“00”（两个零）： 010000 010110 001001 101000 011010 010111 001101 101000 011001 010110 101100

5. 您可以对之前的组进行简单的串联（即将所有二进制值粘合在一起并获得 66 个字符的字符串）： 010000010110001001101000011010010111001101101000011001010110101100

6. 然后，将得到的字符串分成几组，每组有 8 个字符（如果最后一组少于 8 个字符，则必须丢弃它）。现在你有 8 组 8 位字节： 01000001 01100010 01101000 01101001 01110011 01101000 01100101 01101011

7. 再次使用 ASCII 表，将所有二进制值转换为其 ASCII 字符： A 乙 H 我 s H e k

8. 最后的和弦，连接所有ASCII字符得到结果字符串： 阿布舍克

因此，

原始字符串的大小（以字节为单位）=下限（6n/8）-填充

---

base64 字符串的大小（以字节为单位）= ceil(8n/6) + padding

---

从base64解码时

int paddingCount = (base64Data.endsWith("==")) ? 2 :(base64Data.endsWith("=")) ? 1 : 0;

double dataSize = floor(base64Data.length() * 3 / 4) - paddingCount;

编码为base64时

int paddingCount = 3 - (stringToEncode.length()) % 3;

double dataSize = ceil(stringToEncode.length() * 4 / 3) + paddingCount;

Answer 5

您可以利用

fetch

的内部运作原理：

const url = 'data:image/jpeg;base64...'
const resp = await fetch(url)
const size = +resp.headers.get('Content-Length')

Answer 6

const img = 'data:image/png;base64,aBdiVBORw0fKGgoAAA';

const buffer = Buffer.from(img.substring(img.indexOf(',') + 1));

console.log("Byte length: " + buffer.length);
console.log("MB: " + buffer.length / 1e+6);