Convert byte[] to image and display on jsp

Question

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.

Snowclad

I think you'll need to convert the byte array into a base64 string. Please see https://mcmap.net/q/101745/-how-do-i-convert-a-byte-array-to-base64-in-java – Delagarza

@cricket_007 I still don't know how to use this Base64 String in my jsp. – Snowclad

Have user.imageFile be a string instead of a byte array. – Delagarza

Answer 1

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

Nebulosity

Thanks. It worked. I used the basic java.util.Base64 class methods to do the base64 encoding.Base64.getEncoder().encode(bytes) – Pereira

I 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. – Pereira

What if i won't add tranisent keyword to the field? What if create method to convert base 64 on the request? – Anodize

Answer 2

private void updateSalesRepImage(SalesRepPhoto salesRepPhoto, Model model) throws UnsupportedEncodingException {
    AttachmentDownloadResponseData attachmentDownloadResponseData = digitalSalesRoomFacade.downloadAttachment(getAttachmentDownloadRequestData(salesRepPhoto));
    byte[] bytes = attachmentDownloadResponseData.getAttachment();
    byte[] encodeBase64 = Base64.getEncoder().encode(bytes);
    String base64Encoded = new String(encodeBase64, StandardCharsets.UTF_8);
    model.addAttribute(SALES_REP_IMAGE, base64Encoded);
}

this is not working

Castara

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Cirilo

The prefect solution to create base64 encoded string! – Anodize