Question

我想将字节数据设置为来自jsp的img html标签。 I have followed this link.首先，我通过以下代码将字节数据转换为base64：

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

base64数据是in this link .然后我通过以下代码将字节数据设置为img标记：

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

但我无法在img标签中看到图像。哪里错了？如何在jsp页面中显示img标签中的图像？请帮我。

需要注意的一点：

字节数据是指纹数据。所以我想要做的是获取指纹数据，然后将数据显示为img标签。第一部分完成。我已经成功捕获了字节格式的手指数据。现在我想将字节数据显示为img标签。在这方面请帮助我。

Answer 1

根据您发送的链接，您的基本64位图像数据看起来无效。

您可以通过直接在浏览器URL栏中输入完整字符串来测试它（Firefox可以执行此操作）：

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

你的网址看起来不错。

将imageBuffer1输出到文件系统上的png文件，以确保byte []实际上是一个有效的png。

以下是有效图像src作为base64数据的示例

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

Answer 2

第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";
    }

}

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

如何在jsp中将字节数据显示为img标签？

需要注意的一点：

2 个答案:

UploadController.java

upload.jsp