StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow can I get image data from a server side perl program and display in a div using javascript
text
Body
copied!<p>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:</p> <pre><code><img src="html://localhost/cgi-bin/fd.cgi"/> </code></pre> <p>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. </p> <p>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.</p> <pre><code>$.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; }, </code></pre> <p>});</p> <p>html: </p> <pre><code><div id="img1"></div> <div class="hidden" id="img2"></div> </code></pre> <p></p> <p>Here's the perl snippet</p> <pre><code> 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; </code></pre> <p>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.</p> <p>When I run the perl script from the console I get the following (truncated) output.</p> <blockquote> <p>Content-Type: image/jpg;base64^M ^M /9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEP ERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4e Hh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAF9AZwDASIA</p> </blockquote> <p>If I look at the data received via the javascript debugger I see:</p> <blockquote> <p>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</p> </blockquote> <p>And the data in the response looks the same as the data dumped on the console.</p> <p>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. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload