javascript - Show Image Preview + Show Dimensions -

i trying add image cropper site, while sending image dimensions processing when image sent cropped. can image show in preview box, cannot javascript output 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 ' + imgwidth + ' x ' + imgheight );             };              var image = new image();             image.src = document.getelementbyid('avatar_preview').src;             image.onload = getdimensions();          };      </script> 

and 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 0 x 0" in image_dimension text field.

you on right path need use 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, should leave onload callback is.

as side note, should insert line

document.getelementbyid('image_dimension').value = ('the image size ' + imgwidth + ' x ' + imgheight ); 

inside callback function image loaded asynchronously.

check out how image size (height & width) using javascript? , https://developer.mozilla.org/en-us/docs/web/api/htmlimageelement/image