Read /Process image through javascript by passing its URL - Similar to file_get_contents in PHP?

Question

UPDATE:

For testing purposes, I used

<input type="text" onClick="doProcess(http://www.abc.com/chart.png)" />

That didn't work (used alert 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

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 for() loop from the doProcess() function which would be

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

}

But this doesn't work too :(

ORIGINAL POST

I have an input file to which a QR image file is supplied with.

<input type="file" onchange="doProcess(this.files)">

doProcess function

function doProcess(f)
{
    var o=[];

    for(var i =0;i<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]); 
    }
}

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 - remove the need to browse to the image file manually. This brings me to a few queries:

Is it possible for doProcess(f) to perform the same actions when supplied with an image URL instead of a file? At present f parameter is a file. What will happen if f parameter is a URL (for ex: doProcess(http://www.abc.com/abc.jpg))? I realize there are other support functions inside doProcess() also being called to complete the decoding process but I'm assuming those will act accordingly to the type of data being passed through doProcess.
If f parameter is an image file (browsed on local computer and selected) instead of image URL, what data type will f be? I'm guessing it will be an array or in some raw binary form.

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.

In summary, what will happen if I pass the location of the image stored as the argument instead of a file?

Thanks in advance.

score 2 · Accepted Answer · answered Sep 13 '12 at 13:14

2

There is some problems that I don't know you have or not in here because it's not your full code and I don't know what exactly you are trying to do. Here a working example of something very close of what you are doing. It loads a image on a canvas (you could use your qrcode stuff instead)

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      var gCanvas;
      var gCtx;
      function load(){
        console.log("loaded");
        gCanvas = document.getElementById("mcanvas");
        if (gCanvas.getContext){
          gCtx = gCanvas.getContext("2d");
        } else console.log("no Canvas?");
      }
      function doProcess(f){
          var o=[];
          var reader = new FileReader();
          reader.onload = (function(theFile) {
              var img = new Image();
              img.src = theFile;
              img.onload = function(){
                gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
                gCtx.drawImage(img,0,0);
              }
              return;
          })(f);

          console.log(reader);
          reader.readAsDataURL(f);
      }
    </script>
  </head>

  <body onload="load()">
    <input type="text" onClick="doProcess('https://www.google.com.br/logos/2012/clara_schuman-2012-hp.jpg')" />
    <canvas id="mcanvas" height="500" width="500"></canvas>
  </body>
</html>

dont't forget the load function, it grants your javascript to run after body loads.

answered Sep 13 '12 at 13:14

Virgílio Santos

412
2
13

Thanks for the reply. What I'm trying to do is just pass the image url stored on server to `doProcess()` function. Then `doProcess` will use `qrcode.decode(e.target.result);` to decode the QR image. This is a long shot, but is it possible to know what **`e.target.result`** means in this context? – asprin Sep 13 '12 at 13:41
+1 btw for the code to draw image on canvas. But I think `qrcode.decode()` takes care of drawing of the image. – asprin Sep 13 '12 at 13:44
I don't know what exactly is the e.target attribute in this case, since the `theFile` variable already have the URL string so you can put it on qrcode.decode method directly. One thing you are doing is to returning a function but not initializing the same way you are doing with the reader.onload one. Try to put: `return (function(e) { gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height); qrcode.decode(e.target.result); })(f);` – Virgílio Santos Sep 13 '12 at 13:50
What I did is used your code and right where it says `gCtx.drawImage(img,0,0);`, I replaced it with `qrcode.decode(theFile);`. Firebug throws up the following error: `NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMFileReader.readAsDataURL]` ALso, Firebug also says `TypeError: gCanvas is undefined` – asprin Sep 13 '12 at 13:57
My bad, that error was caused due to something not in the scope of this question. It works fine after I replace your one line with qrcode.decode function.Thanks again! – asprin Sep 13 '12 at 14:29

Read /Process image through javascript by passing its URL - Similar to file_get_contents in PHP?

1 Answers1

Linked

Related