13

How can I get the size of the newly created new Image() in bytes if this image's src is base64 data image?

I have such coffeescript code:

# 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

The output is always like this:

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

This newImageObj.fileSize is always undefined.

2
  • 4
    In Base64, 4 chars represents 3 bytes and =s on the end let you know how many bytes short the final String (so you don't carry 0s)
    – Paul S.
    Apr 29, 2015 at 9:34
  • It is sad that there is no built-in method for this, however, your approach works, so thank you :)
    – kovpack
    Apr 29, 2015 at 10:12

5 Answers 5

24

here is the algorithm to find file size from base64 string:

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;
7
  • 4
    very close :) 1024
    – kovpack
    Apr 11, 2018 at 16:55
  • 6
    What is the significance of the constants you are using 4, 3 and 0.5624896334383812?
    – shmit
    Jun 4, 2018 at 18:27
  • I think var sizeInKb=sizeInBytes/1000; should be var sizeInKb=sizeInBytes/1024;
    – Abhay
    Jul 17, 2020 at 15:12
  • 9
    This formula is right for the wrong reason and thus overcomplicated. Base64 encodes 3 bytes of binary data on 4 characters. So to get the size of the original data, you juste have to multiply the stringLength (minus the header) by 3/4. The answer above made the mistake of multiplyijng by 4/3 instead. The 0.5624896334383812 magic constant is there to correct that error (4/3 * 0.5624896334383812 = 3/4).
    – elcye
    Sep 24, 2021 at 17:11
  • 5
    The real formula is thus Math.ceil(stringLength / 4) * 3, minus 1 or 2 bytes if the string length is not a multiple of 4 or if it ends with padding, if you want to be extra precise. 1 missing char or one = at the end: 1 byte to remove. 2 missing chars or == at the end: 2 bytes to remove. It cannot have 3 missing chars or ends with ===.
    – elcye
    Sep 24, 2021 at 17:44
7

I'd personally use something like this to do the above, which will work correctly in the case that the data isn't formatted correctly (eg, an '=' missing, which usually gets decoded correctly anyway)

new Buffer(base64String, 'base64').length
2
  • 1
    What is Buffer? I can't find any reference for this. Only ArrayBuffer exists, but it doesn't expect the arguments you've provided. Aug 31, 2017 at 12:19
  • 6
    Ah, this is Node. Was looking for a front-end solution. Thanks for the clarification! Aug 31, 2017 at 16:08
1

I'm a little late to the question here, and maybe I'm wrong but...

Looking at your code above, it looks like you are defining a function and using arrow notation to return the answer. However, there are TWO lines following the arrow, and they aren't grouped in any way, so... the arrow notation is returning the value of onload() to the first log() only. So "this" actually has a value. But the second log() is a new command altogether, right? It's not being returned from onload(). So newImageObj is undefined.

Or maybe it's a coffeescript syntax, I'm not familiar with it. Would this fix it?

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
}
0

You can take advantage of the inner workings of fetch for that:

const url = 'data:image/jpeg;base64...'
const resp = await fetch(url)
const size = +resp.headers.get('Content-Length')
0
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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.