About size check

Asked

Viewed 356 times

5

I’ve found several explanations about it, but none conclusive. Is it possible to determine the size (in bytes) of an image after it is loaded and using Javascript? Apparently the security of the browsers would prevent us from pulling this information via Xmlhttprequest giving error in cross Domain request, there is a way to transpose this limitation?

javascript html

  • If the image is not in your domain is to give "problem" of cross Domain request same. Otherwise, we would have serious security issues - but note that some servers allow for cross-domain requests in some cases. If the image is in the same domain then it is easy to access the image. I hope that, for this case, you get a good answer here ;)

1 answer

3

Recover Picture Data on Local Disk:

For browsers that support HTML5/CSS3, it is possible according to the following code:

HTML:

<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>

Javascript:

// var url = window.URL || window.webkitURL; // alternate use

function readImage(file) {

    var reader = new FileReader();
    var image  = new Image();

    reader.readAsDataURL(file);  
    reader.onload = function(_file) {
        image.src    = _file.target.result;              // url.createObjectURL(file);
        image.onload = function() {
            var w = this.width,
                h = this.height,
                t = file.type,                           // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~~(file.size/1024) +'KB';
            $('#uploadPreview').append('<img src="'+ this.src +'"> '+w+'x'+h+' '+s+' '+t+' '+n+'<br>');
        };
        image.onerror= function() {
            alert('Invalid file type: '+ file.type);
        };      
    };

}
$("#choose").change(function (e) {
    if(this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if(F && F[0]) for(var i=0; i<F.length; i++) readImage( F[i] );
});

The line s = ~~(file.size/1024) +'KB'; gives you the size in bytes.

Look at this link for a demo.

I used it as a reference that answer stackoverflow.

Recover image data loaded from a URL:

Below is shown a simple example that shows properties of an image recovered from a URL without showing the size:

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

This answer is also taken from a link stackoverflow.

According to this link of stackoverflow in English, it is not possible to recover the size of an image on the page, via javascript, only via server side. Note that the answer was marked as correct.

  • This method is only possible locally, I needed a way to calculate the weight with the image already loaded on the page, or from the url of the same.

  • I updated the answer

  • Note that it is not possible to calculate the size locally. If this has answered your question, please mark it as such by "ticking" the green check to the left of the question. Please upvote the question if you haven’t already done so. Thank you :)

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.