0

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?

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
iCodeLikeImDrunk
  • 17,085
  • 35
  • 108
  • 169

2 Answers2

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" />
JJ.
  • 5,425
  • 3
  • 26
  • 31
  • can javascript even render an image out of that blob even if it was successfully pass over?! all my variables and etc are in jsp file then the js file is the one that actually generate the html animation etc... very annoying=/ – iCodeLikeImDrunk Aug 19 '11 at 02:45
  • No not likely. This is why you need to leave the image data on the server side and pass an `IMG` src url to the JSP. – JJ. Aug 19 '11 at 12:13
1

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:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • i wanted to insert just the link to the image instead of the whole image as a blob but thats the way my mentor wants it...i was thinking of doing ajax calls but havent really figure the whole thing out yet tho... – iCodeLikeImDrunk Aug 19 '11 at 02:43
  • 1
    Sorry, but either your mentor is a complete idiot, or you misunderstood him. You *could* base64-encode it and then use the data URI scheme, but that isn't going to work across all webbrowsers and definitely not the normal way of serving images. – BalusC Aug 19 '11 at 03:27
  • im looking over the companies codes they seem to do it a similar way.. insert image as blob to table then retrieve it when needed.. i just havent figure out how its all done – iCodeLikeImDrunk Aug 19 '11 at 04:32
  • I think you should ask your mentor to explain this to you more in detail, possibly run you through some quick examples of his/her thinking (and also a quick run-through of the existing code you talk about). Or have someone more experienced do it with you. If he/she can't do that, he/she is not a mentor. He/she is a "boss" (and a terribly bad one, at that). – pap Aug 19 '11 at 12:03