通过传递其 URL 通过 javascript 读取 /Process 图像 - 类似于 PHP 中的 file_get_contents？答案

【问题标题】：Read /Process image through javascript by passing its URL - Similar to file_get_contents in PHP?通过传递其 URL 通过 javascript 读取 /Process 图像 - 类似于 PHP 中的 file_get_contents？
【发布时间】：2012-09-06 11:28:33
【问题描述】：

更新：

出于测试目的，我使用了

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

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

刚刚发现这是HTML 5相关的代码。我还想，因为我传递的是 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 图像。现在出于纯粹的兴趣和好奇心，我打算做一些不同的事情 - 不再需要手动浏览图像文件。这给我带来了一些疑问：

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

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

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

提前致谢。

【问题讨论】：

标签： javascript image file url upload

【解决方案1】：

这里有一些问题我不知道你有或没有，因为它不是你的完整代码，我不知道你到底想做什么。这是一个与您正在做的事情非常接近的工作示例。它在画布上加载图像（您可以使用您的 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 在正文加载后运行。

【讨论】：

感谢您的回复。我要做的只是将存储在服务器上的图像 url 传递给 doProcess() 函数。然后doProcess 将使用qrcode.decode(e.target.result); 解码QR 图像。这是一个长镜头，但有可能知道 e.target.result 在这种情况下是什么意思吗？
+1 btw 用于在画布上绘制图像的代码。但我认为qrcode.decode() 负责绘制图像。
我不知道在这种情况下 e.target 属性到底是什么，因为 theFile 变量已经有 URL 字符串，所以你可以直接把它放在 qrcode.decode 方法上。您正在做的一件事是返回一个函数，但不以与 reader.onload 相同的方式进行初始化。试试把：return (function(e) { gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height); qrcode.decode(e.target.result); })(f);
我所做的是使用了您的代码，并且在上面写着gCtx.drawImage(img,0,0); 的地方，我用qrcode.decode(theFile); 替换了它。 Firebug 抛出以下错误：NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMFileReader.readAsDataURL] ALso，Firebug 还说 TypeError: gCanvas is undefined
我的错，该错误是由于不在此问题范围内的某些原因引起的。我用 qrcode.decode 函数替换你的一行后它工作正常。再次感谢！