How to get image size in bytes using javascript

Question

please tell me how to get image file size in bytes using javascript.

Thanks

Answer 1

To get the image size, you need to access it on the server. Javascript is a client-side utility, so it can't directly retrieve information from a server.

You'd have to send an Ajax request to communicate with the server. Alternatively, when your page is created, save file sizes in <input type='hidden' /> boxes and access them when you need them, or a similar solution.

Answer 2

If you have a base64-encoded image src, you can use img.src.length * 0.75 to determine very close file size it will take if saved to disk.

Answer 3

If javascript engine supports canvas elements you can try to use canvas element and getImageData to fetch the pixel data from your image. Then, depending on type of the image you could create the binary representation of this image.

Here is info about canvas element and getImagedata api:

http://www.whatwg.org/specs/web-apps/current-work/#dom-context-2d-getimagedata