Показать изображение Preview + Показать размеры

Question

Я пытаюсь добавить обрезку изображения на свой сайт, а также отправлять размеры изображения для обработки, когда изображение отправляется для обрезания. Я могу получить изображение, которое появится в окне предварительного просмотра, но я не могу получить javascript для вывода размеров изображения.

Мой сценарий:

<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> 

И мой 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' /> 

Этот код дает мне "Это изображение 0 х 0" в image_dimension текстовом поле.

Answer 1

Вот как вы можете получить размер изображения с помощью Javascript.

1. Instantiate новое изображение:

var img = new Image(); 

2. Установить источник изображения:

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

3. Теперь, чтобы получить ширину и высоту просто использовать:

img.width 
img.height 

Answer 2

Вы на правильном пути, но вам нужно использовать объект Image. Вместо

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

Вы должны сделать

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

Наконец, вы должны оставить свой onload обратный вызов, как есть.

В качестве примечания, вы должны вставить эту строку

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

внутри функции обратного вызова, как загружается изображение асинхронно.

Заканчивать How to get image size (height & width) using JavaScript? и https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image