2

更新：

出于测试目的，我使用了

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

这不起作用（用于alert测试是否通过了 url。警告框确实显示了 url，但解码失败）。从某种意义上说，我自己回答了部分问题。关于如何通过 javascript 读取图像文件的任何想法？tt

刚刚发现这是HTML 5相关的代码。我还想，因为我传递的是 url 而不是文件列表，所以我需要for()从函数中删除循环，doProcess()这将是

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

}

但这也不起作用:(

原帖

我有一个输入文件，其中提供了 QR 图像文件。

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

doProcess 函数

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

此功能完美运行。那里没有问题。此函数的目的是解码 QR 图像。现在出于纯粹的兴趣和好奇，我打算做一些不同的事情——消除手动浏览图像文件的需要。这给我带来了一些疑问：

  1. doProcess(f)当提供图像 URL 而不是文件时，是否可以执行相同的操作？目前f参数是一个文件。如果f参数是 URL（例如：doProcess(http://www.abc.com/abc.jpg)）会发生什么？我意识到内部还有其他支持函数doProcess()也被调用来完成解码过程，但我假设这些函数会根据传递的数据类型进行相应的操作doProcess。

  2. 如果f参数是图像文件（在本地计算机上浏览并选择）而不是图像 URL，那么数据类型f是什么？我猜这将是一个数组或某种原始二进制形式。

我的目的是研究这个过程并了解幕后究竟发生了什么。通过使用“浏览”功能，QR 图像被成功解码。

总之，如果我将图像的位置作为参数而不是文件传递会发生什么？

提前致谢。

4

1 回答 1

2

有一些问题我不知道你是否在这里，因为它不是你的完整代码，我不知道你到底想要做什么。这是一个与您正在做的事情非常接近的工作示例。它在画布上加载图像（您可以使用您的 qrcode 东西代替）

<!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>

不要忘记加载功能，它允许您的 javascript 在正文加载后运行。

于 2012-09-13T13:14:16.437 回答