I would like to convert BufferedImage to an image that will display on JSP page. How can I achieve this?
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.
See also:
How to retrieve and display images from a database in a JSP page?
Simplest way to serve static data from outside the application server in a Java web application
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">
Related
I have a controller that create model attribute and passes to the view "partial.html" to generate output
partial.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Home page</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<p>
<span th:text="'Today is: ' + ${message}"></span>
</p>
</body>
</html>
and inside a controller method
model.addAttribute("message", search);
How to do I get Htlm Output to a string inside controller method?
like this
String htmlOutput="from partial.html";
Let's say you have a HTML file with two variable name and todayDate.
You want to process it and want to store it in a string / database / AWS S3.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Hello</p>
<p th:text="${name}"></p>
<p th:text="${todayDate}"></p>
</body>
</html>
Your HTML file location is src/main/resources/templates/home.html
By using the below function you can get the final processed HTML as:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Hello</p>
<p>Manoj</p>
<p>30 November 2019</p>
</body>
</html>
import org.thymeleaf.context.Context;
#GetMapping("/")
public void process() {
SpringTemplateEngine templateEngine = new SpringTemplateEngine();
ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();
templateResolver.setPrefix("templates/");
templateResolver.setCacheable(false);
templateResolver.setSuffix(".html");
templateResolver.setTemplateMode("HTML");
// https://github.com/thymeleaf/thymeleaf/issues/606
templateResolver.setForceTemplateMode(true);
templateEngine.setTemplateResolver(templateResolver);
Context ctx = new Context();
SimpleDateFormat dateFormat = new SimpleDateFormat("dd MMMM yyyy");
Calendar cal = Calendar.getInstance();
ctx.setVariable("todayDate", dateFormat.format(cal.getTime()));
ctx.setVariable("name", "Manoj");
final String result = templateEngine.process("home", ctx);
System.out.println("result:" + result);
}
If you're using the usual Spring MVC approach, as Joanna says you're doing things in the wrong order. The Controller creates the model and specifies the view, and then after that the view is rendered by the Thymeleaf template that uses the model.
If, on the other hand, you're trying to render Thymeleaf templates yourself (rather than sending them to the user's browser directly, maybe for use in HTML email or to store prerendered pages in a database or something), then you'd need to create your own Thymeleaf Template Engine to use. Refer to the "Creating and configuring the Template Engine" section of the documentation for details. You can create your own Engine, and then use its process method to get the result of the template to put into a variable for further use.
You may looking for this, getting directly the result HTML, just ignore the email part of the post.
Then, you can create this:
final Context ctx = new Context(locale);
ctx.setVariable("name", recipientName);
ctx.setVariable("subscriptionDate", new Date());
ctx.setVariable("hobbies", Arrays.asList("Cinema", "Sports", "Music"));
ctx.setVariable("imageResourceName", imageResourceName);
// so that we can reference it from HTML
final String htmlContent = this.templateEngine.process("html/email-inlineimage.html", ctx);
So you have the htmlContext of rendered thymeleaf template (with vars)
Once the control goes out to view processor (JSP/Thymeleaf etc), it will not be coming back to controller. You will be able to get the raw html response in a customFilter, but not in the Controller.
When using dompdf what PDF meta data can be set in the document information dictionary?
Originally asked elsewhere:
Are you able to parse more META info to be added to PDF information during PDF generation?
/Creator (DOMPDF)
/CreationDate (D:20150818031116-05'00')
/ModDate (D:20150818031116-05'00')
Can you specify Author, Copyright, etc..?
I cannot find ANY reference to this. Only just saw your: Creator, Creation Date and Modification Date!
In the current stable release (0.6.1) the HTML <title> element and some <meta> elements (author, keywords, description) are used to set the relevant PDF meta data.
<html>
<head>
<title>Ehhhhhhh</title>
<meta name="author" content="Arthur Herbert Fonzarelli">
<meta name="keywords" content="fonzie, cool, ehhhhhhh">
</head>
<body>
<p>Ehhhhhhh</p>
</body>
</html>
In addition, you can add other info to the PDF using the $dompdf->add_info() method. The full list of supported metadata info that you can set is: Title, Author, Subject, Keywords, Creator, Producer, CreationDate, ModDate, Trapped.
$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$dompdf->add_info('Subject', 'Cool');
$dompdf->add_info('Title', 'Your meta Title');
$dompdf->add_info('Author', 'Your meta Author');
$dompdf->add_info('Subject', 'Your meta Subject');
$dompdf->add_info('Keywords', 'Your meta Keywords');
I am trying to play with codes. However, why does Webpage NEVER allow the to access any local files.
Means if you write
<img src="c:\ImageFolder\Angelica.jpg"/>
in the jsp file, it will NOT work.
WHY NOT? Is there a way for me to retrieve an image from my C Drive and display in webpage?
src attribute of img tag is used to refer relative path or url of source i.e source can be inside your web container or hosted by some other website. You cannot use absolute path for source, as you cannot refer to files outside container.
As a work around, you can create a servlet that can load file from outside of your web container and then write/stream file to your response. You will provide path of file to the servlet and that servlet will serve the file to you.
Suppose if you create a servlet for serving file with name 'FileServlet', and this FileServlet takes 'path' as parameter to fetch file, you img tag will look something like this:
<img scr="FileServet?path=c:\\parentDirectory\file.jpg">
refer: File Servlet by BalusC for detailed working.
> :)Try
<html>
<%#page import="java.io.File"%>
<%#page import="java.io.IOException"%>
<%#page import="java.awt.image.BufferedImage"%>
<%#page import="javax.imageio.ImageIO"%>
<%#page import="java.io.ByteArrayOutputStream"%>
<%#page import="java.math.BigInteger"%>
<%#page import="javax.xml.bind.DatatypeConverter"%>
<%#page import="java.awt.image.BufferedImage"%>
<head>
</head>
<body>
<%
//write image
try{
String imgName="C:\\PATROL_SITE_IMAGES\\17-Jun-2016\\7588519616\\249_R.jpg";
BufferedImage bImage = ImageIO.read(new File(imgName));//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 = DatatypeConverter.printBase64Binary(imageInByteArray);
%>
<img class="img-responsive" src="data:image/jpg;base64, <%=b64%>"/>
<%
}catch(IOException e){
System.out.println("Error: "+e);
}
%>
</body>
</body>
</html>
I use tomcat 5.5, JSF 1.2, Spring 3
I have the servlet that passes file from disk to browser. The problem occures when that file has a text/html mime type.
I can't know what encoding that file might have so I can't set correct response encoding.
That's the code of servlet
private void handleFILERequest(final FacesContext context) throws UnsupportedEncodingException {
String filePath = AbstractBean.getStrRequestScopeAttribute(FILE_PATH);
String mimeType = AbstractBean.getStrRequestScopeAttribute(FILE_MIME_TYPE);
String fileName = AbstractBean.getStrRequestScopeAttribute(FILE_NAME);
byte[] data = getFile(filePath);
HttpServletResponse response = AbstractBean.getResponse();
response.reset();
response.setContentType(mimeType);
response.setContentLength(data.length);
if (fileName == null || "".equals(fileName)) {
response.addHeader("Content-Disposition", "attachment; filename=\"downloadFile\"");
} else {
response.addHeader("Content-Disposition", "attachment; filename=\"" + URLEncoder.encode(fileName, "UTF-8") + "\"");
}
try {
response.getOutputStream().write(data);
} catch (Exception exception) {
LOG.error(exception.getMessage());
}
context.responseComplete();
}
private byte[] getFile(final String path) {
return IOUtils.readFile(path);
}
That problem occurs only when mime type of a file is text/html. Somehow that byte stream is re-encoded after I pass it to response outputstream. Also the html tag is slightly changed as you can see below. I think that servlet container do that but I am not sure.
Is there a way to detect file encoding to set it as response encoding or at least to prevent further re-encoding of response stream?
At least I'd like to know who changes that byte stream, tomcat, spring, jsf or...?
Here come a part of file on disk and resulting downloaded file in browser:
File on disk (cyrillic symbols, but no encoding defined):
<html>
<head>
<link HREF="/vestnik/csstyles/article.css" REL="stylesheet">
<title>Л.О. Бутакова. Опыт классификации ошибок ...</title>
</head>
...
File that I get in browser:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link HREF="/vestnik/csstyles/article.css" REL="stylesheet">
<title>пїЅ.пїЅ. пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ. пїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅпїЅ пїЅпїЅпїЅпїЅпїЅпїЅ ...</title>
</head>
...
Thanks in advance.
You can use UTF-8 encoding
String str = new String(data); //set your data in this object
response.setContentType("text/plain");
InputStream input = new ByteArrayInputStream(str.getBytes("UTF8"));
I am new to MVC 3 and have come accross the following scenario:
First let me explain how I have setup my application:
All post backs to the server use jquery ajax which which return a view from the controller that either appended or prepended or replace a targeted div.
The Scenario:
I have come to a point where I would like to upload images but unfortunately because of the jquery ajax posting I cannot get the values for an html in C# Request.Files. I know there are plugins out there to help out with this but I would like to do this myself so I have created an <iframe> which i then use a bit of javascript and post the form targeted to the iframe (old classic way of doing things):
function UploadImg(SACTION) {
alert(SACTION);
validatorform.action = SACTION;
validatorform.target = "fraImage";
validatorform.method = "POST";
validatorform.submit();
}
the SACTION parameter looks like this #Url.Action("UploadFile", "Response"). This all works well as it hits the controllers action method and I can then save the image:
[HttpPost]
public ActionResult UploadFile(string ArticleID)
{
ViewBag.PreviewImage = cFileUploads.UploadFile(ArticleID, Request.Files[0]);
return View("ImagePreview");
}
I would now like to return a view to the iframe (simply to preview the image and then do a couple of other things but this is besides the point)
The View for previewing the Image:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="">
<img alt="" src="#ViewBag.PreviewImage" />
</form>
</body>
</html>
The Problem:
Unfortunately when I return the View (ImagePreview.cshtml) in C# the whole page is refreshed, all I want is for the iFrame to be refreshed. How should I return the view from the controller?
Fiqured out the problem, I had a bit of javascript that was replacing the contents of a div that the iframe was sitting in ... (slap on my forehead). All working perfectly now :)
Will leave this question here just incase ..