我进行了大量搜索,但答案要么无效,要么不是一个好的解决方案。将引用放入 html 的解决方案如下:
<img src="html://localhost/cgi-bin/fd.cgi"/>
有两个问题,一个是图像会改变并且会被缓存。我知道我可以在调用中放置一个随机参数并解决这个问题,但另一个问题是程序运行了几秒钟。我使用 javascript setInterval 来循环。 perl 程序读取图像文件并对其进行注释。这需要一段时间,3 或 4 秒,在此期间显示空白,所以我有两个 div,一个隐藏而另一个显示。逻辑是我将用图像加载隐藏的图像,加载完成后,我将隐藏第一个并显示第二个,下一个 channel ,反之亦然。似乎没有我可以在“加载完成”处捕获的事件。无论如何我在调试器中都没有看到。
ajax 调用引入了数据,但我不知道如何显示它。我在 perl 脚本中对其进行 base64 编码。这是 javascript。
$.ajax({ type: 'GET',
url: 'http://localhost/cgi-bin/fdmap/image.pl',
success: function(data)
{
$('#img1').html('<img src="data:image/jpg;base64,'+data+'"');
},
error: function(data)
{
console.log("Error ");
return true;
},
});
html:
<div id="img1"></div>
<div class="hidden" id="img2"></div>
这是 perl 片段
binmode STDOUT;
print $cgi->header("image/jpg;base64");
open INP,"pcb.jpg";
my $it;
while(<INP>) {
my $in = $_;
$it.=$in;
}
my $encoded = encode_base64($it);
print $encoded;
我只是使用一个小的 jpg 文件进行测试。弄清楚如何显示图像数据后,我将动态生成图像。
当我从控制台运行 perl 脚本时,我得到以下( chop 的)输出。
Content-Type: image/jpg;base64^M ^M /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEP ERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4e Hh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAF9AZwDASIA
如果我查看通过 javascript 调试器收到的数据,我会看到:
HTTP/1.1 200 OK Date: Sun, 05 May 2013 15:28:43 GMT Server: Apache/2.2.14 (Ubuntu) Keep-Alive: timeout=15, max=99 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: image/jpg;base64
并且响应中的数据看起来与控制台上转储的数据相同。
但是没有显示任何内容,也没有错误消息可供查看。只是一个空白屏幕。我已经为此工作了好几个小时。感谢你给与我的帮助。 哦,我不在乎它是否在 IE 中工作。
最佳答案
只有快速扫描,所以我不确定,但是 - 你确定吗
$('#img1').html('<img src="data:image/jpg;base64,'+data+'"');
^
//not missing the tag-end?---+
因为你得到
<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASAB....."
需要(恕我直言)
<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASAB....." />
关于javascript - 如何从服务器端 perl 程序获取图像数据并使用 javascript 在 div 中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16386514/