Get real image dimensions javascript

Question

Ok, i have this function right here:

function realImgDimension(img) {
    var i = new Image();
    i.src = img.src;
    return {
        naturalWidth: i.width,
        naturalHeight: i.height
    };
}

var myImage = document.getElementById('blah');
myImage.addEventListener('load', function() {
    var realSize = realImgDimension(this);
    console.log('My width is: ', realSize.naturalWidth);
    console.log('My height is: ', realSize.naturalHeight);
});

when I upload image that is for example 1530x2500 it prints that width is 2500 and height 1530. Why is this happening? If I have an image 2500x1300 it prints it corrctly. So something happens with the images that their width is smaller than their height, or images that are "tall"

Any ideas?

this is what i call onchange

function readURL(files) {
    if (files && files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah')
                    .attr('src', e.target.result)
                    .width($(window).width() * 0.3)
        };
        reader.readAsDataURL(files[0]);
    }

}

and this is my form

    <div class="form-group">
        {{ Form::label('image', 'Slider Image') }}<br>
        <img id="blah" alt="your image" style="background-color:black; margin-top:10px; border-radius:5px; image-orientation: from-image;"/><br><br>
        <div style="position:relative;">
            <a class='btn btn-primary' href='javascript:;'>
                Choose File...
                <input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="image" id="image" size="40"  accept="image/gif, image/jpeg, image/png" onchange="readURL(this.files);">
            </a>
            &nbsp;
            <span class='label label-info' id="upload-file-info"></span>
        </div>
    </div>

Answer 1

You should use/set images to dimensions with a power of two (i.e. 2500, 1600). You should also check orientations whether printing a portrait on a landscape and vice versa. Maybe this documentation may help you: WebGL and the power of two image size