我想从jsp将字节数据设置为img html标签。我点击了这个链接。所以首先我通过以下代码将字节数据转换为base64：
byte[] encodeBase64 = Base64.getEncoder().encode(imageBuffer1);
encoded = new String(encodeBase64, "UTF-8");
encoded = "data:image/png;base64," + encoded;
out.println(encoded);
base64 数据在此链接中。然后我通过以下代码将字节数据设置为 img 标签：
<img id="profileImage" src="<%=encoded%>">
但是我看不到img标签中的图像。哪里有问题？如何从 jsp 页面在 img 标签中显示图像？请帮助我.
注意事项：
字节数据是指纹数据。所以我想做的是获取指纹数据，然后将数据显示到 img 标签。第一部分完成。我已经成功地捕获了字节格式的手指数据。现在我想向 img 标签显示字节数据。请在这方面帮助我。
根据您发送的链接，您的 base 64 图像数据似乎无效。
您可以通过直接在浏览器 URL 栏中输入完整字符串来测试它(Firefox 可以做到这一点(：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
您的网址看起来不错。
将 imageBuffer1 输出到文件系统上的 png 文件，以确保 byte[] 实际上是有效的 png。
下面是作为 base64 数据的有效图像 src 的示例
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
https://github.com/mimaraslan/spring-boot/tree/master/spring-boot-base64-encoder-decoder
步骤 1
上传控制器.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
上传.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>