title: Read /Process image through javascript by passing its URL - Similar to file_get_contents in PHP?
body: <p><strong>UPDATE:</strong></p>
  
  <p>For testing purposes, I used </p>
  
  <pre><code>&lt;input type="text" onClick="doProcess(http://www.abc.com/chart.png)" /&gt;
  </code></pre>
  
  <p>That didn't work (used <code>alert</code> to test if url was being passed. The alert box did show up with the url, but decoding failed). In a sense, I answered a part of my question myself. Any ideas on how to read an image file through javascript?tt</p>
  
  <p>Just found that this is HTML 5 related code. Also I figured since I'm passing a url instead of list of files, I'll need to remove the <code>for()</code> loop from the <code>doProcess()</code> function which would be</p>
  
  <pre><code>function doProcess(f)
  {
      var o=[];
  
             var reader = new FileReader();
          reader.onload = (function(theFile) {
          return function(e) {
              gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
  
              qrcode.decode(e.target.result);
          };
          })(f);
          reader.readAsDataURL(f); 
  
  }
  </code></pre>
  
  <p>But this doesn't work too :( </p>
  
  <hr>
  
  <p><strong>ORIGINAL POST</strong></p>
  
  <p>I have an input file to which a QR image file is supplied with.</p>
  
  <pre><code>&lt;input type="file" onchange="doProcess(this.files)"&gt;
  </code></pre>
  
  <p><strong>doProcess function</strong></p>
  
  <pre><code>function doProcess(f)
  {
      var o=[];
  
      for(var i =0;i&lt;f.length;i++)
      {
          var reader = new FileReader();
          reader.onload = (function(theFile) {
          return function(e) {
              gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
  
              qrcode.decode(e.target.result);
          };
          })(f[i]);
          reader.readAsDataURL(f[i]); 
      }
  }
  </code></pre>
  
  <p>This function works perfectly. No problems there. The purpose of this function is to decode a QR image. Now out of sheer interest and curiosity, I'm planning to do something different - <strong>remove the need to browse to the image file manually</strong>. This brings me to a few queries:</p>
  
  <ol>
  <li><p>Is it possible for <code>doProcess(f)</code> to perform the same actions when supplied with an image URL instead of a file? At present <code>f</code> parameter is a file. What will happen if <code>f</code> parameter is a URL (<strong>for ex: doProcess(http://www.abc.com/abc.jpg)</strong>)? I realize there are other support functions inside <code>doProcess()</code> also being called to complete the decoding process but I'm assuming those will act accordingly to the type of data being passed through <code>doProcess</code>.</p></li>
  <li><p>If <code>f</code> parameter is an image file (browsed on local computer and selected) instead of image URL, what data type will <code>f</code> be? I'm guessing it will be an array or in some raw binary form.</p></li>
  </ol>
  
  <p>My intention is to study the process and know what exactly is happening behind the scenes. By using the 'browse' function, the QR image is being decoded successfully.</p>
  
  <p>In summary, what will happen if I pass the location of the image stored as the argument instead of a file?</p>
  
  <p>Thanks in advance.</p>