如何从服务器端perl程序获取图像数据并使用javascript显示在div中

Question

我做了很多搜索，要么答案不起作用，要么这不是一个好的解决方案。 将引用放入html的解决方案如：

<img src="html://localhost/cgi-bin/fd.cgi"/>

有两个问题，一个是图像会改变，它会被缓存。 我知道我可以在调用中放置一个随机参数并解决问题，但另一个问题是程序运行了几秒钟。 我使用javascript，setInterval来循环。 perl程序读取一个图像文件并对其进行注释。 这需要一段时间，3或4秒，显示屏在此期间显示空白，因此我有两个div，一个是隐藏而另一个是显示。 逻辑是我将加载隐藏的图像，当加载完成时，我将隐藏第一个并显示第二个，下一个通道，反之亦然。 似乎没有任何事件我可以陷入“装载完成”。 没有我在调试器中看到的无论如何。

ajax调用会引入数据，但我无法弄清楚如何显示它。 我将base64编码在perl脚本中。 这是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脚本时，我得到以下（截断的）输出。

内容类型：image / JPG; BASE64 ^ M ^ M / 9J / 4AAQSkZJRgABAQEASABIAAD / 2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEP ERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7 / 2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4e Hh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7 / wAARCAF9AZwDASIA

如果我查看通过javascript调试器收到的数据，我看到：

HTTP / 1.1 200 OK日期：太阳，2013年5月5日15:28:43 GMT服务器：Apache / 2.2.14（Ubuntu）Keep-Alive：timeout = 15，max = 99连接：Keep-Alive Transfer-Encoding：chunked Content -Type：image / jpg; base64

并且响应中的数据与控制台上转储的数据相同。

但是没有显示任何内容，也没有任何错误消息可供查看。 只是一个空白的屏幕。 我一直在研究这个问题好几个小时。 感谢你给与我的帮助。 哦，如果它在IE中工作，我可以更少关心。

Answer 1

只有快速扫描，所以我不确定，但是 - 你确定比

$('#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....." />