CODEWITHSUNDEEP
javahtmlimagejspbase64
Sultan Ahmed
Sultan Ahmed

Reputation: 2220

How to show byte data to img tag in jsp?

I want to set byte data to img html tag from jsp . I have followed this link. So first I have converted the byte data to base64 by the following code : 

byte[] encodeBase64 = Base64.getEncoder().encode(imageBuffer1);
encoded = new String(encodeBase64, "UTF-8");
encoded = "data:image/png;base64," + encoded;
out.println(encoded);

The base64 data is in this link . Then I have set the byte data to img tag by the following code : 

<img id="profileImage" src="<%=encoded%>">

But I could not see the image in the img tag . Where is wrong ? How can I show the image in img tag from jsp page ? Please help me .

Point to be noted :

The byte data is fingerprint data . So what I want to do is to take fingerprint data and then show the data to img tag . First part is completed . I have successfully captured the finger data in byte format . Now I want to show the byte data to img tag. Please help me in this regards.

Upvotes: 0

Views: 1555

Answers (2)

Mimar Aslan
Mimar Aslan

Reputation: 1

https://github.com/mimaraslan/spring-boot/tree/master/spring-boot-base64-encoder-decoder

Step 1

UploadController.java

import java.io.IOException;
import java.util.Base64;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

@Controller
public class UploadController {

    @GetMapping("/upload")
    public String viewUpload() {
        return "upload";
    }       

    @PostMapping("/upload") 
    public String viewFileUpload(@RequestParam("fileName") MultipartFile fileName, RedirectAttributes redirectAttributes) {

        if (fileName.isEmpty()) {
            redirectAttributes.addFlashAttribute("message", "Please select a file to upload");
            return "redirect:upload";
        }

        try {
            byte[] fileBytes = fileName.getBytes();
            String fileBase64 = Base64.getEncoder().encodeToString(fileBytesNew);

            redirectAttributes.addFlashAttribute("message", "You successfully uploaded");
            redirectAttributes.addFlashAttribute("imageName", fileName.getOriginalFilename());
            redirectAttributes.addFlashAttribute("fileBase64", fileBase64);              

        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }

        return "redirect:/upload";
    }

}

Step 2

upload.jsp

<!DOCTYPE html>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
    <c:url value="${pageContext.request.contextPath}/css/styles.css" var="jstlCss" />
    <link href="${jstlCss}" rel="stylesheet" />
</head>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Spring Boot</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="index">Home</a></li>
                    <li><a href="upload">Upload</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
            <div class="starter-template">

                <h1>Upload Page</h1>

                <c:set var="message" scope="page" value="${message}" />
                <c:if test="${not empty message}">
                    <h2><c:out value="${message}" /></h2>
                </c:if>

                <c:set var="fileBase64" scope="page" value="${fileBase64}" />
                <c:if test="${not empty fileBase64}">
                  <h2>${imageName}</h2>
                  <img src="data:image/*;base64,${fileBase64}" alt="No image" style="max-width: 70%; height: auto;" />          
                </c:if>

            </div>

            <hr>
                <form method="POST" action="/upload" enctype="multipart/form-data">
                    <input type="file" name="fileName" /><br />
                    <input type="submit" value="Submit" />
                </form>
    </div>

    <script type="text/javascript" src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Upvotes: 0

leonardseymore
leonardseymore

Reputation: 543

It looks like your base 64 image data is invalid according to the link you sent.

You can test it by entering the full string directly into your browser URL bar (Firefox can do this):

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

Your url looks fine.

Output your imageBuffer1 to a png file on the filesystem to ensure the byte[] is actually a valid png.

Here's an example of valid image src as base64 data

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>

Upvotes: 1

Related Questions