Java后端获取本地图片以流的方式返回layui前端
时间: 2024-03-01 13:53:59 浏览: 32
在Java后端中,可以使用Java的File类和ImageIO类读取本地图片,然后将图片以流的形式返回。在Layui前端中,可以使用Ajax技术向Java后端发送请求,然后将返回的图片流显示在页面上。以下是示例代码:
Java后端代码:
```java
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class ImageController {
@RequestMapping(value = "/image", method = RequestMethod.GET, produces = "image/jpeg")
@ResponseBody
public byte[] getImageAsBytes(@RequestParam("name") String imageName) throws IOException {
Resource resource = new ClassPathResource("images/" + imageName);
File file = resource.getFile();
BufferedImage bufferedImage = ImageIO.read(file);
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
ImageIO.write(bufferedImage, "jpg", byteArrayOutputStream);
return byteArrayOutputStream.toByteArray();
}
}
```
在这个示例中,我们使用了Spring框架的`@Controller`注解和`@RequestMapping`注解,以便在URL路径中接收图片的名称。`@ResponseBody`注解告诉Spring将返回的字节数组转换成HTTP响应。我们使用Spring的`Resource`类和`ClassPathResource`类来加载本地图片,然后使用和之前示例一样的方式将其转换成字节数组返回。注意,这个示例中我们将图片放在了`src/main/resources/images`目录下。
前端代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示图片</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
</head>
<body>
<img id="image" src="" alt="图片">
<script type="text/javascript">
$(function() {
var imageName = "myimage.jpg"; // 图片名称
var url = "/image?name=" + imageName; // 请求图片的URL
$.ajax({
type: "GET",
url: url,
success: function(data) {
var blob = new Blob([data], {type: "image/jpeg"}); // 将字节数组转换成Blob对象
var objectUrl = URL.createObjectURL(blob); // 创建URL对象
$("#image").attr("src", objectUrl); // 在页面上显示图片
},
error: function() {
layer.msg("获取图片失败");
}
});
});
</script>
</body>
</html>
```
这个示例中,我们使用了jQuery和Layer插件。在页面加载完成后,使用Ajax向Java后端发送请求,获取图片流并将其显示在页面上。注意,这个示例中的图片名称是硬编码的,你需要根据实际情况修改代码来适应你的应用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)