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

Question

如果此图像的 src 是 base64 数据图像，我如何获得新创建的 new Image() 的字节大小？

我有这样的 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

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

new Buffer(base64String, 'base64').length

Answer 2

我来晚了一点，也许我错了但是...

查看上面的代码，您似乎正在定义一个函数并使用箭头表示法 return 答案。但是，箭头后面有两行，它们没有以任何方式分组，所以...箭头符号是 return 仅将 onload() 的值设为第一个 log()。所以 "this" 实际上是有一个值的。但是第二个 log() 完全是一个新命令，对吧？它不是从 onload() 中 returned。所以 newImageObj 是未定义的。

也可能是coffeescript语法，我不熟悉。这会解决它吗？

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 3

这是从 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 4

您可以利用 fetch 的内部工作原理：

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

Answer 5

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);

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

How to get file size of newly created Image() if src is base64 string?

javascript

image

coffeescript