通过传递URL来读取/处理图像 - 类似于PHP中的file_get_contents？ [英] Read /Process image through javascript by passing its URL - Similar to file_get_contents in PHP?
问题描述
更新
出于测试目的，我使用了
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 im年龄。现在出于纯粹的兴趣和好奇心，我打算做一些不同的事情 - 无需手动浏览图像文件。这给我带来了一些问题：
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（对于ex：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 presentfparameter is a file. What will happen iffparameter is a URL (for ex: doProcess(http://www.abc.com/abc.jpg))? I realize there are other support functions insidedoProcess()also being called to complete the decoding process but I'm assuming those will act accordingly to the type of data being passed throughdoProcess.
如果 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.
我的目的是研究这个过程并知道幕后究竟发生了什么。通过使用浏览功能，QR图像被成功解码。
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?
提前致谢。
推荐答案
有我不知道你在这里遇到的一些问题，因为它不是你的完整代码，我不知道你到底想要做什么。这是一个非常接近你正在做的事情的工作示例。它在画布上加载图像（你可以用你的qrcode代替）
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来读取/处理图像 - 类似于PHP中的file_get_contents？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
