How to convert BufferedImage to image to display on JSP

StackOverflow https://stackoverflow.com/questions/2438375

  •  19-09-2019
  •  | 
  •  

Question

I would like to convert BufferedImage to an image that will display on JSP page. How can I achieve this?

Was it helpful?

Solution

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 /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());

See also:

OTHER TIPS

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">

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top