Java后端响应出来的图片流在HTML中显示

 var logoName = $("#materPicLogo").val();
    if (logoName == "") {
        layer.msg("当前没有选择设置主图LOGO");
        return false;
    }
 var img = ''<div style="margin: 0 auto;width: 80%"><img width="100%" src="http://localhost/users/viewLogo?logoName='' + logoName + ''"/></div>'';
 /**
     * 返回一个图片流到前端显示
     *
     * @param logoName
     * @param map
     * @param response
     * @throws IOException
     */
    @RequestMapping(value = "viewLogo", method = RequestMethod.GET)
    public void viewLogo(@RequestParam("logoName") String logoName, Map<String, Object> map, HttpServletResponse response) throws IOException {
        AdminUser adminUser = (AdminUser) map.get("adminUser");
        //图片的绝对路径
        String picPath = new StringBuffer(logosAdminPath).append("/")
                .append(adminUser.getAdminUserNick()).append("/")
                .append(logoName).toString();
        String picType = logoName.substring(logoName.lastIndexOf(".") + 1, logoName.length());
        File file = new File(picPath);
        ByteArrayOutputStream os = null;
        try {
            BufferedImage read = ImageIO.read(file);
            os = new ByteArrayOutputStream();
            ServletOutputStream fout = response.getOutputStream();
            response.setHeader("Content-Type", "image/jped");
            ImageIO.write(read, picType, fout);
            fout.close();
        } catch (IOException e) {
            logger.error("viewLogo IOException:{}", e);
        } finally {
            if (os != null) os.close();
        }
    }
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后端发送请求,获取图片流并将其显示在页面上。注意,这个示例图片名称是硬编码的,你需要根据实际情况修改代码来适应你的应用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Acmen-zym

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值