title: Get variable inside load function
body: <p>I know this might probably been answered many times but I do not know the words to search for to find the answer. So here is the question.</p>
  
  <p>I'm using javascript and I have</p>
  
  <pre><code>function getDataUrl( file ){
      var url = URL.createObjectURL( file ),
      canvas = document.createElement('canvas'),
      ctx = canvas.getContext("2d"),
      img = new Image,
      dataURL = '';
  
      img.load = function(){
          canvas.height = this.height;
          canvas.width = this.width;
          ctx.drawImage(this, 0, 0);
          dataURL = canvas.toDataURL("image/jpeg");
      };
  
      img.src = url;
      return dataURL;
  }
  </code></pre>
  
  <p>then on the input I have this,</p>
  
  <pre><code>$('#file-input').on('change', function(e){
      var dataUrl = getDataUrl( e.target.files[0] );
      console.log( dataUrl );
  });
  </code></pre>
  
  <p>But it return empty string (the initial one). I want the base64 data that already generated inside load.</p>
  
  <p>I've try something like this</p>
  
  <pre><code>function getDataUrl( file ){
  //... codes
  
      img.load = function(){
          //... codes
          dataURL = canvas.toDataURL("image/jpeg");
          return dataUrl;
      };
  }
  </code></pre>
  
  <p>but of course it can't since it return to the load function and not to it's parent function.</p>
  
  <p>How do I get <code>dataUrl</code> value inside load function ?</p>
  
  <p>Thanks</p>