Przekazywanie zmiennej

Witam.
Mam problem z podstawami i dlatego proszę Was o pomoc.
Nie wiem w jaki sposób "wyciągnąć" zmienne imgWidth i imgHeight poza metodę img.onload = function() {}
Swoją drogą co to jest za skłania img.onload = function() {}. Gdybym jakoś mógł na ten temat poczytać to może bym nie miał z resztą problemów.

Proszę o konkretne odpowiedzi.
Z góry dzięki za pomoc.

 
function readURL(input) 
{
  var maxHeight = 200;
  var maxWidth = 300;
  var input = document.getElementById(input)
  if (input.files && input.files[0]) {
      var reader = new FileReader();
      
      reader.onload = function (e) {
      var img = e.target.result;

        // reader.width;
        $('#img_prev')
        .attr('src', img)
        .width(150)
        .height(200);
    };
    reader.readAsDataURL(input.files[0]);
  }
  
  var path = $('#img_prev').attr('src');
  var imgWidth;
  var imgHeight;
  img = new Image();
  img.onload = function() {
    imgWidth= this.width;
    imgHeight= this.height;
  };
  img.src = path;

  var newWidth;
  var newHeight;
  if ((imgWidth > maxWidth) && (imgHeight > maxHeight))
  {
    factor = imgWidth / imgHeight;
    newHeight = Math.floor(maxWidth / factor);
    newWidth = maxWidth;
  }
  
  $('#img_prev')
  .attr('src', img)
  .width(newWidth)
  .height(newHeight);
  
}

readURL('image');

Chodzi o ten fragment:

img.onload = function() {
imgWidth= this.width;
imgHeight= this.height;
};

img.onload = function() {
     imgWidth= this.width;
     imgHeight= this.height;
   };

Przypisuje funkcję do onload (inaczej: przy wywołaniu onload wykona się kod zawarty pomiędzy { a }).

Nie wiem w jaki sposób "wyciągnąć" zmienne imgWidth i imgHeight poza metodę img.onload = function() {}

Skoro ustawiasz szerokość i wysokość obrazu na imgWidth oraz imgHeight, to nie wystarczy potem odczytać width/height tego obrazka?

one są "wyciągnięte" poza tę funkcję, ale przypisują się dopiero w zdarzeniu - czyli asynchronicznie
inaczej - przypisujesz funkcję do zdarzenia i ona się wykona dopiero po załadowaniu obrazka (onload)
natomiast Ty próbujesz odczytać te zmienne od razu po tym - a one nie są wtedy jeszcze przypisane

to co chcesz zrobić to wrzucić resztę kodu które są pod tym onload, do tej funkcji (poza przypisaniem "src")

no i skoro już korzystasz z jQuery to zamień:

img.onload = function()
{
...
}

na:

$(img).load(function()
{

});

Dziękuję za wyczerpującą odpowiedź.