Menu
I would like to convert BufferedImage to an image that will display on JSP page. How can I achieve this?
988
First, JSP is a view technology providing a template to write HTML/CSS/JS in and the ability to interact with backend Java code to control page flow and access backend data. Your problem is more in HTML.
Now, to display an image in a HTML page, you need the HTML <img> element. To define/allocate an image, you just have to let the src attribute point to an URL. E.g.
<img src="url/to/image.jpg" />
(it can be either relative to the current context, or an absolute URL, e.g. starting with http://)
If the image is dynamic, as in your case, you need to have a Servlet which listens on the url-pattern matching the image URL. E.g.
<img src="imageservlet/image.jpg" />
(here the servlet is obviously to be mapped on an URL pattern of /imageservlet/* and the image identifier, here the filename, is here available by request.getPathInfo())
The <img src> will fire a GET request, so you just have to implement doGet() method of the servlet. To send a HTTP response all you need to do is to write some content to the OutputStream of the response, along with a set of response headers representing the content (Content-Type, Content-Length and/or Content-disposition). You can use ImageIO#write() to write a BufferedImage to an OutputStream.
You can find a basic example of such an image servlet here. You just have to replace Files#copy() with ImageIO#write().
response.setContentType("image/png");
ImageIO.write(bufferedImage, "png", response.getOutputStream());
As a completely different alternative, you can also let the servlet convert the image to a Base64 encoded string and pass it on to the JSP:
ByteArrayOutputStream output = new ByteArrayOutputStream();
ImageIO.write(bufferedImage, "png", output);
String imageAsBase64 = Base64.getEncoder().encodeToString(output.toByteArray());
request.setAttribute("imageAsBase64", imageAsBase64);
request.getRequestDispatcher("/WEB-INF/some.jsp").forward(request, response);
And finally show it in the forwarded JSP using the data URI scheme as below:
<img src="data:image/png;base64,${imageAsBase64}" />
You only need to keep in mind that this doesn't give the server nor the client the opportunity to cache the image. So this approach is plain inefficient in case the image is not temporary.
127
You need not convert BufferedImage to Image to display it on the jsp page. Because, Java 6 JAXB provides javax.xml.bind.DatatypeConverter.printBase64Binary(byte[]) String to convert byte[] in to base 64 string. The base 64 string can be displayed using the <img html tag by specifying the source data as base 64 i.e. src="data:image/jpg;. Here is the sample program referred from this post.
sample.jsp (test passed) :
<%@page import="java.awt.image.BufferedImage"%>
<%@page import="javax.imageio.ImageIO"%>
<%@page import="java.io.*"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
BufferedImage bImage = ImageIO.read(new File("/home/visruth/Desktop/Visruth.jpg"));//give the path of an image
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write( bImage, "jpg", baos );
baos.flush();
byte[] imageInByteArray = baos.toByteArray();
baos.close();
String b64 = javax.xml.bind.DatatypeConverter.printBase64Binary(imageInByteArray);
%>
<div>
<p>As of v6, Java SE provides JAXB</p>
<img src="data:image/jpg;base64, <%=b64%>" alt="Visruth.jpg not found" />
</div>
</body>
</html>
IMO, this approach is perfect for small sized images like <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" alt="thumbnail" height="200">. Otherwise using direct url of the image will be fine in src attribute eg:- <img src="uri-of-image/profile-pic.jpg" width="600" alt="No Profie Pic" height="600">
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
