通过传递图像的URL通过javascript读取/处理图像-类似于PHP中的file_get_contents

更新：

出于测试目的，我使用了

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

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

刚刚发现这是HTML5相关的代码。此外，我还认为，由于我传递的是一个url而不是文件列表，因此我需要从doProcess()函数中删除for()循环，该函数将是

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图像进行解码。现在，出于纯粹的兴趣和好奇，我计划做一些不同的事情——消除手动浏览图像文件的需要。这就引出了几个问题：

当提供图像URL而不是文件时，doProcess(f)是否可以执行相同的操作？目前f参数是一个文件。如果f参数是URL（例如：doProcess(http://www.abc.com/abc.jpg)）？我意识到doProcess()内部还有其他支持函数也被调用来完成解码过程，但我假设这些函数将根据通过doProcess的数据类型而起作用。
如果f参数是一个图像文件（在本地计算机上浏览并选择），而不是图像URL，那么f的数据类型是什么？我猜它将是一个数组或某种原始二进制形式

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

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

提前谢谢。

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

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

不要忘记load函数，它允许javascript在主体加载后运行。

相关内容

最新更新

热门标签：