通过传递URL，通过javascript读取/处理图像-类似于PHP中的文件内容？_Javascript_Image_File_Url_Upload

通过传递URL，通过javascript读取/处理图像-类似于PHP中的文件内容？

javascript image file url

通过传递URL，通过javascript读取/处理图像-类似于PHP中的文件内容？,javascript,image,file,url,upload,Javascript,Image,File,Url,Upload,更新：出于测试目的，我使用了 <input type="text" onClick="doProcess(http://www.abc.com/chart.png)" /> 但这也不管用：（原创帖子我有一个输入文件，其中提供了QR图像文件 <input type="file" onchange="doProcess(this.files)"> 数据处理功能 function doProcess(f) { var o=[]; for(var

更新：

出于测试目的，我使用了

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

但这也不管用：（

原创帖子

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

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

数据处理功能

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

函数数据处理（f）
{
var o=[]；
对于（var i=0；i这里有一些问题我不知道你有没有，因为它不是你的完整代码，我也不知道你到底想做什么。这里是一个非常接近你正在做的事情的工作示例。它将图像加载到画布上（你可以使用你的qrcode内容）

var gCanvas；
var-gCtx；
函数加载（）{
控制台日志（“已加载”）；
gCanvas=document.getElementById（“mcanvas”）；
if（gCanvas.getContext）{
gCtx=gCanvas.getContext（“2d”）；
}else console.log（“没有画布？”）；
}
函数doProcess（f）{
var o=[]；
var reader=new FileReader（）；
reader.onload=（函数（文件）{
var img=新图像（）；
img.src=文件；
img.onload=函数（）{
gCtx.clearRect（0,0，gCanvas.width，gCanvas.height）；
gCtx.drawImage（img，0,0）；
}
返回；
})（f） )；
控制台日志（读卡器）；
reader.readAsDataURL（f）；
}

别忘了加载函数，它会让你的javascript在身体加载后运行。
谢谢你的回复。我要做的就是把存储在服务器上的图像url传递给doProcess（）
函数。然后doProcess
将使用qrcode.decode（e.target.result）
解码QR图像。这是一个很长的过程，但是有可能知道e.target.result
在这个上下文中的含义吗？+1 btw让代码在画布上绘制图像。但是我认为qrcode.decode（）
负责图像的绘制。我不知道在这种情况下e.target属性到底是什么，因为theFile
变量已经有URL字符串，所以您可以直接将其放在qrcode.decode方法上。您要做的一件事是返回一个函数，但不是以与读卡器相同的方式初始化。onlo广告一。试着放：return（函数（e）{gCtx.clearRect（0，0，gCanvas.width，gCanvas.height）；qrcode.decode（e.target.result）；}）（f）；
我所做的是使用了你的代码，就在它写着gCtx.drawImage（img，0，0）；
的地方，我用qrcode.decode.decode（theFile）代替了它；
.Firebug抛出以下错误：NS\u error\u XPC\u BAD\u CONVERT\u JS:无法转换JavaScript参数arg 0[nsIDOMFileReader.readAsDataURL]
此外，Firebug还说类型错误：gCanvas未定义我的错，该错误是由于不在本问题范围内的内容引起的。在我用qrcode.decode函数替换您的一行后，它工作正常。再次感谢！
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]); 
    }
}

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