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

Question

I have done a lot of searching and either the answer doesn't work or it's not a good solution. The solution of just putting a reference into the html like:

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

Has two problems, one is the image will change and it'll get cached. I know that I can put a random parameter on the call and get around the problem, but the other problem is that the program runs for a few seconds. I use javascript, setInterval, to loop. The perl program reads an image file and annotates it. This take a while, 3 or 4 seconds and the display blanks out during that time, so I have two divs, one is hidden while the other is being displayed. The logic is that I'll load the hidden one with an image and when the load is complete, I'll hide the first and display the second, next pass, vice versa. There seems to be no event I can trap at "load completion". None I saw in the debugger at any rate.

The ajax call brings in the data but I can't figure out how to display it. I base64 encode it in the perl script. Here's the 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>

Here's the perl snippet

    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;

I'm just using a small jpg file for testing. Once I figure out how to display the image data I"ll generate the image dynamically.

When I run the perl script from the console I get the following (truncated) output.

Content-Type: image/jpg;base64^M ^M /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEP ERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4e Hh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAF9AZwDASIA

If I look at the data received via the javascript debugger I see:

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

And the data in the response looks the same as the data dumped on the console.

However nothing is displayed and there are no error messages to be seen. Just a blank screen. I've been working on this for many hours. Thanks for any help you can give me. Oh and I could care less if it works in IE or not.

Answer 1

Only with quick scan, so i'm not sure, but - are you sure than

$('#img1').html('<img src="data:image/jpg;base64,'+data+'"');
                                                          ^ 
                             //not missing the tag-end?---+

because you get

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASAB....."

and need (IMHO)

<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASAB....." />