Show Image Preview + Show Dimensions

Question

I am trying to add an image cropper to my site, while also sending the image dimensions for processing when the image is sent to be cropped. I can get the image to show up in the preview box, but I cannot get javascript to output my image dimensions.

My script is:

<script type="text/javascript">

        function PreviewImage() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("id_avatar").files[0]);

            oFReader.onload = function (oFREvent) {
                document.getElementById("avatar_preview").src = oFREvent.target.result;

            };

            var imgheight;
            var imgwidth;

            function getDimensions() {
                imgheight = image.height; 
                imgwidth = image.width;
                document.getElementById('image_dimension').value = ('The image size is ' + imgwidth + ' x ' + imgheight );
            };

            var image = new Image();
            image.src = document.getElementById('avatar_preview').src;
            image.onload = getDimensions();

        };

    </script>

And my HTML:

<input type='file' id='id_avatar' name='avatar' onchange="PreviewImage();" /><br />

<div id="parent" style="width: 300px; height: 300px; overflow: hidden;">
    <img id="avatar_preview" src="#" alt="your image" style="width:400px;" />
</div>

<input type='text' id='image_dimension' name='image_dimension' />

This code gives me "This image is 0 x 0" in the image_dimension text field.

score 1 · Answer 1 · edited May 23 '17 at 11:51

1

You are on the right path but you need to use the Image object. Instead of

var image = document.getElementById('avatar_preview').src;

You should do

var image = new Image();
image.src = document.getElementById('avatar_preview').src;

Finally, you should leave your onload callback as is.

As a side note, you should insert this line

document.getElementById('image_dimension').value = ('The image size is ' + imgwidth + ' x ' + imgheight );

inside the callback function as the image is loaded asynchronously.

Check out How to get image size (height & width) using JavaScript? and https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

edited May 23 '17 at 11:51

Community

1
1

answered May 11 '15 at 17:08

AmmarCSE

30,079
5
45
53

If I move the document.getElementById('image_dimension').value into the callback, then I get nothing whatsoever in the text box. I'm updating my code to show. – Jason Boyce May 11 '15 at 17:36
@JasonBoyce, remove 'return true;' from the callback at the end of imgheight = this.height; imgwidth = this.width; return true; – AmmarCSE May 11 '15 at 17:52
I removed "return true" and changed the variables from "imgheight = this.height;" and "imgwidth = this.width" to "imgheight = image.height;" and "imgwidth = image.width;" which gives me "The image size is 0 x0" which is better than undefined but still not the actual image. It is improving though! – Jason Boyce May 11 '15 at 18:14
@JasonBoyce, no, return it to imgheight = this.height. For image.onload = getDimensions(); change it to image.onload = getDimensions; by removing the paranthesis at the end. Then it should work – AmmarCSE May 11 '15 at 19:50
Hold on my previous comment was incorrect. It seems to work on the 2nd time I select an image to upload, but not the first. – Jason Boyce May 11 '15 at 19:58

score 0 · Answer 2 · answered May 11 '15 at 17:07

This is how you get the image size using Javascript.

1. Instantiate a new Image:

var img = new Image();

2. Set the image source:

img.src = document.getElementById('avatar_preview').src;

3. Now to get the width and height just use:

img.width
img.height

Show Image Preview + Show Dimensions

2 Answers2