Podgląd i zmiana rozmiaru obrazka przed uploadowaniem

Witam.
Poniższy kod wykrywa za drugim wywołaniem skryptu rozmiar wyświetlanego obrazka przed jego uploadowaniem. Chciałbym żeby od razu wykrył rozmiar obrazka bez drugiego wywołania. Problemem jest zapewne drugi onload, lecz nie wiem w jaki sposób bez drugiego onload skrypt wykrywał rozmiar obrazka.
Poniżej kod:

 
var input = document.getElementById('image');

if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function (e) {
    var img = e.target.result;

      // reader.width;
      $('#img_preview').attr('src', img);
  };
  reader.readAsDataURL(input.files[0]);
}

var path = $('#img_preview').attr('src');
img = new Image();
img.onload = function() {
  var imgWidth = this.width;
  var imgHeight = this.height;

  var newWidth = 200;
  var newHeight = 200;
 

    if (imgWidth > imgHeight)
    {
      $('#img_preview').css('width', newWidth+'px').css('height', '');
    } 
    
    if (imgWidth < imgHeight)
    {
      $('#img_preview').css('height', newHeight+'px').css('width', '');
    } 

};

img.src = path;

$('#img_preview').attr('src', img);

Z góry wielkie dzięki za pomoc.
Pozdrawiam.

Ten kod:

var path = $('#img_preview').attr('src');
img = new Image();
img.onload = function() {
  var imgWidth = this.width;
  var imgHeight = this.height;
 
  var newWidth = 200;
  var newHeight = 200;
 
 
    if (imgWidth > imgHeight)
    {
      $('#img_preview').css('width', newWidth+'px').css('height', '');
    } 
 
    if (imgWidth < imgHeight)
    {
      $('#img_preview').css('height', newHeight+'px').css('width', '');
    } 
 
};
 
img.src = path;
 
$('#img_preview').attr('src', img);

wykonuje się od razu, jeszcze przed załadowaniem obrazka. Chcesz pobrać ścieżkę, która jeszcze nie istnieje. Rozwiązanie myślę, że proste - przenieś ten kod do funkcji reader.onload.

Niestety nie działa ten sposób, gdyż obrazek jest wgrany w momencie wywołania kodu "reader.readAsDataURL(input.files[0]);". Więc jeśli wpisze console.log(this.width); to nie ma czego pobierać. Próbowałem też console.log(e.width) i nadal nie dostaje informacji o szerokości obrazka. Ma ktoś inny pomysł?

 
var input = document.getElementById('image');
 
if (input.files && input.files[0]) {
    var reader = new FileReader();
 
    reader.onload = function (e) {
    var img = e.target.result;
    console.log(this.width);
    
    $('#img_preview').attr('src', img);

  };
  reader.readAsDataURL(input.files[0]);

}