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

Question

我已经进行了大量搜索，但答案要么不起作用，要么不是一个好的解决方案。只需将引用放入 html 中的解决方案如下：

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

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

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 脚本时，我得到以下（截断的）输出。

内容类型：image/jpg;base64^M ^M /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEP ERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4 e Hh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAF9AZwDASIA

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

HTTP/1.1 200 OK 日期：2013 年 5 月 5 日，星期日 15:28:43 GMT 服务器：Apache/2.2.14 (Ubuntu) 保持活动：超时=15，最大=99 连接：保持活动传输编码：分块内容-类型：图像/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....." />