当前位置: 七九推 > 网络运营>服务器>Linux > base64编码显示图片

base64编码显示图片

2022年06月23日 Linux 我要评论
1.base64编码显示图片 一般我们后台给前端传图片,有两种方式,一种就是通过response.getOutputStream直接将图片以流的形式写到页面显示,另一种就是先把图片上传到服务器,拿

1.base64编码显示图片

一般我们后台给前端传图片,有两种方式,一种就是通过response.getOutputStream直接将图片以流的形式写到页面显示,另一种就是先把图片上传到服务器,拿到url地址后把url地址给前端

第一种方式简单,不需要服务器,但是这种不太符合现在开发的要求,因为我们通常需要在响应的时候,加上额外的字段表示响应成功状态,以及错误信息,而直接将图片作为流写回前端的话,response是不能携带这些参数的. 第二种方法需要有一个服务器,且上传图片又是一个额外的步骤.

这个时候我们就可以将图片的字节数组通过base64编译后返回前端,前端直接拿了可以显示为图片

获取图片的字节数组看上一篇博客:

java通过Http请求访问网络图片或文件返回byte数组的两种方式

2. 字节数组base64编译

 byte[] bytes;//图片的字节数组
 BASE64Encoder encoder = new BASE64Encoder();
 String data = encoder.encode(bytes);
//data = iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABxElEQVR42tWYS2rDMB......
   

    3. 前端显示

    前端拿到这个data字符串后,有两种方式显示图片

    先拼接一下前缀, 分别是data:图片类型 ; 编码类型, data字符串数据

    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABxElEQVR42tWYS2rDMB......
       

      第一种,css方式:

      div.image {
          width: 99px;
          height: 42px;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA......);
      }
         

        第二种,img标签方式

        <img width="900" height="450" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAAAqCAYAAA...."/>
           

          注意,如果图片很大的话,转成的data字符串也很长,我这里一个小图片直接15w的字符了,所以这种方式适合比如logo,验证码这种小图片,又不希望存在服务器的应用场景

          自己拼接了<img>标签后,可以在markdown2直接粘贴看看效果

          这里写图片描述

          (0)
          打赏 微信扫一扫 微信扫一扫

          相关文章:

          版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

          发表评论

          验证码:
          Copyright © 2017-2022  七九推 保留所有权利. 粤ICP备17035492号
          站长QQ:2386932994 | 联系邮箱:2386932994@qq.com