我如何从JSP到JavaScript获取图像blob？

Question

I retrieved a blob along with some other data from a table, say name and image :

name = varchar, image = blob

I set this to an object in my filter and pass it to the JSP file:

request.setAttribute("info", object);

In the JSP file I get that data:

request.getAttribute("info");

Now that I have the data from that object how do I go about passing that info to my JS file and render the image as a source for the JS file?

I'm trying:

    <div>
         <script type="text/javascript" src="jsFile.js></script>
    </div>

var name = <%=info.name%>;
var image = <%=info.image%>

It just doesn't seem to be working. What is the correct method of doing this?

Answer 1

You can access your data from the script if you set the variables in a script block before your jsFile.js . Ie:

<div>
    <script type="text/javascript">
        var name = <%=info.name%>;
        var image = <%=info.image%>;
    </script>
    <script type="text/javascript" src="jsFile.js></script>
</div>

I'm not sure how you intend to handle the binary (BLOB) image data however? Typically this would be written to an image file on the server and referenced via an img tag:

<img src="/path/to/myimage.jpg" />

Instead of passing your blob data to the JSP file, I would suggest having the server (your servlet) pass a URL to the JSP which the browser can use to get the image via an img tag. You can either write the blob data to a URL or write a servlet that writes out Content-type: image/jpeg (or similar) data when passed an id, ie:

<img src="http://www.yourserver.com/GetImage?imageId=xxx" />

Answer 2

This isn't going to work. Leave the blob there in the server side. JavaScript on the client side can't do anything sensible with binary data. All it needs is an URL of the image so that it can reference it in the src attribute of a HTML <img> element, so that the webbrowser can in turn do its job of downloading and displaying the image. Best would be to include the image identifier in the URL. The name is unique for the image, right? Use that in the URL instead.

The first step is to let JS create a HTML <img> element with the proper src attribute which points to an URL which returns the image. Assuming that you're preparing the data like follows

String name = "foo.png";
String imageURL = "imageservlet/" + name;
request.setAttribute("imageURL", imageURL);

and are printing it in JSP(!) as if it are JS variables as follows

<script>
    var imageURL = '${imageURL}';
    // ...
</script>

(please note that those singlequotes are thus mandatory to represent them as a JS string variable)

so that they end up in the generated HTML source like follows (rightclick page in browser and do View Source to verify it)

<script>
    var imageURL = 'imageservlet/foo.png';
    // ...
</script>

then you can create the image as follows

var img = document.createElement("img"); // or getElementById("someId")?
img.src = imageURL;
// ... add to document? 

(please note that this is just an example, I have no utter idea what the functional requirement is and what you would like to do with this image element, even more, perhaps JS code isn't needed at all for the concrete functional requirement)

so that it ends up like this in HTML:

<img src="imageservlet/foo.png" />

Now, the second step is to create a servlet which listens on an URL pattern of /imageservlet/* , retrieves the image as an InputStream from the database by the passed-in indentifier and writes it to the OutputStream of the response along a set of correct response headers. Long story short, I've posted several answers before as to how to do it, they contains kickoff code snippets:

• How to retrieve and display images from a database in a JSP page?
• Writing image to servlet response with best performance