Convert byte[] to image and display on jsp
21,517
You can add a tranisent base64imageFile
property to your User
. It will hold the base64 encoded string of the image, which you can access in your jsp like
<img alt="img" src="data:image/jpeg;base64,${user.base64imageFile}"/>
And in your method you should do the encoding, somethig like
@RequestMapping(value = "/register", method = RequestMethod.POST)
public ModelAndView userRegister(@ModelAttribute("user") @Valid User user, BindingResult result, ModelMap model, @RequestParam("fileData") MultipartFile fileData) throws Exception {
if (!fileData.isEmpty() && fileData != null) {
byte[] bytes = fileData.getBytes();
user.setFileName(fileData.getOriginalFilename());
user.setImageFile(bytes);
byte[] encodeBase64 = Base64.encodeBase64(bytes);
String base64Encoded = new String(encodeBase64, "UTF-8");
user.setBase64image(base64encoded);
}
}
IOUtils
and Base64
are a handy util classes from org.apache.commons
, shouldn't have a problem finding
Author by
MJM
Updated on July 09, 2022Comments
-
MJM almost 2 years
I'm trying to display an uploaded picture (which is now a byte array) on a jsp page. Now, the byte[] column exists in the database and has to be converted to an image.
This is what I've been trying:
Part of the table on jsp page:
<c:forEach var="user" items="${userList}"> <tr> <td>${user.fileName}</td> <td> <img src="data:image/jpg;base64,${user.imageFile}" alt="No image"> </td>
Part of the controller that takes an array of bytes from a MultipartFile object:
@RequestMapping(value = "/register", method = RequestMethod.POST) public ModelAndView userRegister(@ModelAttribute("user") @Valid User user, BindingResult result, ModelMap model, @RequestParam("fileData") MultipartFile fileData) throws Exception { if (!fileData.isEmpty() && fileData != null) { byte[] bytes = fileData.getBytes(); user.setFileName(fileData.getOriginalFilename()); user.setImageFile(bytes); } }
If any additional information is needed, please let me know. Thanks.
-
OneCricketeer over 8 yearsI think you'll need to convert the byte array into a base64 string. Please see stackoverflow.com/a/33552306/2308683
-
MJM over 8 years@cricket_007 I still don't know how to use this Base64 String in my jsp.
-
OneCricketeer over 8 yearsHave
user.imageFile
be a string instead of a byte array.
-
-
VHS over 7 yearsThanks. It worked. I used the basic java.util.Base64 class methods to do the base64 encoding.
Base64.getEncoder().encode(bytes)
-
VHS over 7 yearsI must also add that if the image being displayed is larger than the allowed URI size, the browser might not be able to display the image.