通过传递其 URL 通过 javascript 读取/Process 图像 --前端问题

Read /Process image through javascript by passing its URL - Similar to file_get_contents in PHP?(通过传递其 URL 通过 javascript 读取/Process 图像 - 类似于 PHP 中的 file_get_contents?)

本文介绍了通过传递其 URL 通过 javascript 读取/Process 图像 - 类似于 PHP 中的 file_get_contents?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

更新:

出于测试目的，我使用了

For testing purposes, I used

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

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

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

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

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

}

但这也不起作用:(

原帖

我有一个提供 QR 图像文件的输入文件.

I have an input file to which a QR image file is supplied with.

<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 图像.现在出于纯粹的兴趣和好奇心，我打算做一些不同的事情 - 不再需要手动浏览图像文件.这给我带来了一些疑问:

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:

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

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.

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

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?

提前致谢.

推荐答案

这里有一些问题我不知道你有没有，因为它不是你的完整代码，我不知道你到底在尝试什么去做.这是一个与您正在做的事情非常接近的工作示例.它在画布上加载图像(你可以使用你的二维码代替)

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>

不要忘记加载函数，它允许您的 javascript 在正文加载后运行.

dont't forget the load function, it grants your javascript to run after body loads.

这篇关于通过传递其 URL 通过 javascript 读取/Process 图像 - 类似于 PHP 中的 file_get_contents?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！