Home/ Questions/Q 8561485
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T16:30:43+00:00

UPDATE: For testing purposes, I used <input type=text onClick=doProcess(http://www.abc.com/chart.png) /> That didn’t work (used

  • 0

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:

  1. 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.

  2. 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0