Pass dynamic image to JSP with servlet - java

I have a desktop app that creates a graphics 2D object, sticks it in a panel and draws it. I am trying to convert this app to a webpage using servlets and jsps. I have been reading online for 2 days and can't wrap my head around how to do this, each example I find seems to leave out an important piece. I don't want to save the image to file because each user will get a new/different image.
Can I create the image in the servlet along with the other response variables and pass them to the jsp at the same time? Then call the image using something like ${response.image}.This seems be preferable but doesn't seem to work.
Or do I need a separate servlet just for the image (this seems harder)? Also how do I prepare the Graphics2D object to be used as an image in HTML?

You need to understand that it's the webbrowser who has got to download the invididual images based on the URLs of the <img> elements found in the retrieved HTML code and that it's not the webserver who has got to inline the image's raw content in the produced HTML code somehow.
You really need to create a standalone image servlet for this which listens on those specific URLs of the <img> elements. You can make the servlet reuseable by providing an unique image idenfitier in the request query string or request path info during generating the HTML code.
E.g.
<img src="imageServlet?param1=value1&param2=value2" />
with a
#WebServlet("/imageServlet")
public class ImageServlet extends HttpServlet {
#Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// Create image based on request.getParameter() information.
// Set proper content type by response.setContentType().
// Write image to response.getOutputStream().
}
}
See also:
How to retrieve and display images from a database in a JSP page? - follows a similiar approach

I'll just answer on the first part of the question. To embed an image into an HTML page, you first need to generate the HTML page which will contain the following markup:
<img src="somePath" />
This HTML markup will be sent in the response to the request, and the browser will parse it. It will then send a second HTTP request to somePath, to download the bytes of the image.
So, you need to somehow store the generated image in memory and wait for the second request, and then send the bytes to the response, or you need to delay the image generation until the second request comes in. I much prefer the second solution. So the goal of the code handling the first request will just be to generate markup containing an img tag pointing to an appropriate URL. This URL should contain all the parameters necessary to actually generate the image.
For the second part, you will certainly have to create a BufferedImage instance, draw to its Graphics2D object, and use ImageIO to write this BufferedImage to the response output stream.

Related

Servlet response in different .htm file

How to show response or output generated by servlet using separate .html file designed with CSS?
For example, output generated by servletresp.java in htmlpage.html.
Can we use CSS in Servlet programming?
You question is very generic so I'm going to assume you are a beginning Java web programmer.
To your first question, I advise you to use JSP pages (or any other template technology).
Yes, it is possible to serve .html files from a Servlet using a RequestDispatcher, but JSP pages are meant to generate such output - it is easy to make a small part of a JSP page dynamic, while serving HTML files from a servlet doesn't give you an option for some dynamic behaviour.
Just rename your file.html page to file.jsp and put in in your web source directory of your war project.
To your second question - HTML sent by a servlet or a JSP page is still normal HTML and you can use CSS as you would in any HTML page.
Code example:
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
RequestDispatcher dispatcher = request.getRequestDispatcher("/file.html");
// If you want to include the file in your response, use dispatcher.include -
// you can include multiple different files or send more output using
// response.getWriter() or response.getOutputStream
dispatcher.include(request, response);
// If you just want to send this one file as the response, use dispatcher.forward
dispatcher.forward(request, response);
}
If your aim is to have the user's browser (appear to) request a static .html page, but have your servlet code executed instead, there's a few ways you could do that.
Most (All? I'm only familiar with running Struts on WebSphere) servlet containers allow you to specify an arbitrary pattern for URLs that are mapped to actions, so you could simply put in a mapping for htmlpage.html to your servlet action that executes the associated code then runs through a JSP (or similar) to render HTML to be sent as the response.
Alternatively you could simply serve up a static HTML page that uses a JavaScript (so executed client-side) templating engine, then load the data for the page from your servlet (likely as JSON) via an AJAX call when the page loads.
The second part doesn't really make any sense. CSS isn't a programming language, it's simply rules for specifying how things look. It's also meaningless without something to interpret and apply those rules to the content (which is what the browser does). You can include CSS inside HTML, or a separate file, generated in your servlet code, but it's not going to do anything.

captcha image coming back a binary data? How to display this?

I am retrieving a captcha image from the Java based package "SimpleCaptcha"
On the front end I just put the following in my page and I get a captcha image:
<img src="stickyImg" />
I want to reload this captcha image onclick using javascript.
I tried:
$("#theclickhandler").click(function(){
$("#stickyImg").load('stickyImg', function(response){
$("#stickyImg").attr('src', response);
});
return false;
});
This gets the image but outputs something like this (greatly shortened obviously):
<img src="captcha image�PNG �ݚ��L�23U�݆�}$�J����Dy����IEND�B`� ">
That looks like raw, binary data to me. How do I get this to work?
The src attribute of an image tag specifies to the browser where the image to load is, not the content of the image. So you're stuffing the content of the image into the place where you want the location to be, and that's giving you garbage because it simply doesn't make sense.
So, to reload the image, you need to tell the browser that the address of the image has changed. It's not sufficient to simply rewrite the location in the image's src attribute to the same address -- that won't tell the browser to change anything. You can overcome this by stuffing some random data in the query string, say, the time of the request. Like #mikerobi suggests, you can just rewrite the src tag, here with the modification of putting a timestamp in the query string (which your servlet will almost surely ignore):
$('#stickyImg').attr('src', 'stickyImg?' + (new Date().getTime()));
You can't use that approach to load images, you need to set the image url attribute to the path of the image generator.
$('#stickImg').attr('src', 'path/to/image/generator');
I don't know how many browsers support it, but it's possible to base64 encode an image, prefix it with (depending on the image format) "data:image/png; base64,", and use that as a URI for the image.

How to make http get request from servlet to obtain image?

I would to get qr code from google chart API in my servlet (e.g. http://chart.apis.google.com/chart?chs=200x200&cht=qr&chld=M&chl=hello).
What libraries (jars) do i need and how should i save the response (maybe to byte array?)
What do you want to do with the image? If you want to just display it to the user, a simple <a href="..."> will suffice. if you want to do some processing (save it in a database, etc), open a connection (new URL("...").openStream()) and then either use ImageIO to get the image (as an image) or read the bytes.
If you're trying to just display the image to the user you don't need to do the HTTP GET request, just print the relevant HTML to the page and the client will do the request:
<img src="<your URL>" />

How to show images in div that stored in db

I decided to store uploaded to servlet pictures in DB. But how to show them in browser (in particular div with css image-background style) without page reload?
In details: I have an full-AJAX web client that works with java servlet.
Thanks.
Create a servlet that accepts a name / id uniquely identifying the picture as a GET parameter
Let the servlet load the picture from DB (as byte array or better - as stream)
Stream the picture using response.getOutputStream()
Don't forget to set the content-type to image/png or image/jpeg
Refer to the image in the css with url: imageServlet?id=13214

Help getting image from Servlet to JSP page [duplicate]

This question already has answers here:
How to retrieve and display images from a database in a JSP page?
(6 answers)
Closed 7 years ago.
I currently have to generate an image that displays the text of a string, i need to make this image on a Servlet and then somehow pass the image to a JSP page so that it can display it. I'm trying to avoid saving the image, and instead somehow stream the image to the JSP.
I haven't found a way of generating the image since i started with finding how to pass an image from the Servlet to the JSP adn got stuck.
EDIT:
The jsp page is already made and isn't created by the servlet, i have to pass the image into an already existing jsp
Any help is appreciated.
You need to write the image as a byte array to the response's output stream. Something like this:
byte[] imageBytes = getImageAsBytes();
response.setContentType("image/jpeg");
response.setContentLength(imageBytes.length);
response.getOutputStream().write(imageBytes);
Then in you JSP you just use a standard img element:
<img src="url to your servlet">
You can't1 return both in the same response, since you're returning different types (an HTML page of type text/html and an image of type image/jpeg, say).
For this sort of thing, I will generate the image during the initial servlet request (for the containing HTML page). I store it in a cache in my servlet, and write the HTML page with the image tag containing a URL to that image with the handle.
e.g. the browser asks for http://whatever/page
The servlet generates the image, and writes an HTML tag in the page like
<img src="http://whatever/image/unique_handle_to_image">
The browser will render the HTML page, and as part of that issue a new request to my servlet with the handle for the image.
e.g. the browser now asks for http://whatever/image/unique_handle_to_image
I then return the image as content type image/jpeg or similar.
So you have two requests going on. One for the page, in which you render the image and store it temporarily, and the second in which you return the image. You have to remember to clear the image cache, but that's all straightforward. I wouldn't worry about storing lots of images, since the two requests from the browser usually (!) come in quick succession.
I guess it's possible to use a data uri provided your browser supports it, and create something like
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
Note there are a number of caveats surrounding these. See the linked page.
I would do something along this lines to achieve this:
On the JSP page you put a link to an image:
<img src="servlet/path?word=value">the rest</img>
This link points to your servlet, it generates image using request parameters, you do not need to save it, just put it right into response's output stream. You have to remember to disable browser caching for this servlet.
JSP page is displayed first, next all the images are requested, it should work just fine.
Of course, you should not put the text to display in a parameter like this, you should propably encipher it somehow or store it in a HTTP session.
Hope this helps.
If I understand your problem correctly, the sequence of events will be:
You generate an HTML page;
That HTML page is sent to the client; and
The client's browser reads the image URL and requests it as a separate request.
So, you can't generate the image and pass it to the JSP. You can however generate a URL to get the image and put that in the JSP. That's easy enough to pass by the servlet putting it on the HttpServletRequest object (request scope in JSP). For example, generate:
<a href="http://myhost.com/image_servlet?id=1234"/>
You don't really say what that text is or what information is required to generate the image. If you can't encapsulate that in a GET URL, you may need to add extra information and put it in the HttpSession so it can be retrieved on the next get image request.
...
response.setContentType("image/jpeg");
response.setContentLength(imageBytes.length); // imageBytes - image in bytes
response.getOutputStream().write(imageBytes);//
outStream.flush();
outStream.close();

Categories