gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 22:21:10 25 4
gpt4 key购买 nike

更新:

出于测试目的,我使用了

<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 图像。现在,出于纯粹的兴趣和好奇心,我打算做一些不同的事情 - 不再需要手动浏览图像文件。这让我想到了几个问题:

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

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

我的目的是研究这个过程并了解幕后究竟发生了什么。通过使用'browse'函数,QR图像被成功解码。

总而言之,如果我将存储的图像位置而不是文件作为参数传递,会发生什么情况?

提前致谢。

最佳答案

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

<!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 在主体加载后运行。

关于javascript - 通过 JavaScript 通过传递其 URL 读取/处理图像 - 类似于 PHP 中的 file_get_contents?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12405197/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com