IO - 图片展示的几种处理方式
开发工具:idea 2019.3.4
SpringBoot:2.1.12.RELEASE
jdk:1.8
1.Http URI Scheme:数据Http处理方案
形如下面的都可以叫做Http URI Scheme是比较常见的方式
<img src="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF/>
1.1.处理本地资源数据
1.1.1.直接访问静态资源
当图片固定时,可以通过直接访问静态资源的方式很容易访问图片。
后台资源目录:resources/static/images/12.jpeg
前台访问
<img src="http://localhost:8089/images/12.jpeg">
1.1.2.访问非静态资源
以静态资源为例,实际情况可能是从数据库中或者文件服务器中获取,将获取的文件流通过response返回
前台:
<img src="http://localhost:8089/getImage">
后台:
@GetMapping("/getImage")
public void getImage(HttpServletResponse response) {
ClassPathResource resource = new ClassPathResource("wsdlXml/man.jpg");
InputStream inputStream = resource.getInputStream();
BufferedInputStream bis = new BufferedInputStream(inputStream);
BufferedOutputStream bos = new BufferedOutputStream(response.getOutputStream());
int bytesRead;
byte[] buff = new byte[1024];
while ((bytesRead = bis.read(buff, 0, buff.length)) != -1) {
bos.write(buff, 0, bytesRead);
}
bos.flush();
bis.close();
bos.close();
}
1.2.处理第三方接口返回数据
1.2.1.返回的是Base64编码之后的数据
该种情况可以有两种处理方式,一种是在后台做解密处理,另一种后面Data URIScheme中介绍
解密处理
前台
<img src="http://localhost:8089/getImage">
后台
@GetMapping("/getImageDecode")
public void getImageDecode(HttpServletResponse response) throws IOException {
try {
//第三方接口返回
String imageData = "";
//sun.misc
BASE64Decoder decoder = new BASE64Decoder();
byte[] bytes = decoder.decodeBuffer(imageData);
ServletOutputStream outputStream = response.getOutputStream();
outputStream.write(bytes);
outputStream.close();
} catch (Exception e) {
log.error(e.getMessage(), e);
throw e;
}
}
1.2.2.返回的是图片流直接转字符串的数据
当返回如下数据时,可以直接在前台获取,不需要从后台处理
7%%77777777777777777777777777777777777777777777777777�� 8�" �� �� 8 !1AQaq���������"2B#3R$b��� �� ! !1AQ"2�� ? ���%.SF�jr-��Q+��;E�i��$�������l�;�-:�(Q :�tA�"WR��
g?#�߰]L�ŰD!wo[nU���CY �W����آ��gRt]�2$�"Ҥ�#�
t�]| +����~m� �>��� ��~FD%�C[
A~� %�-����Iu
%�j,�vD[q%?��Ti��&P������ �
<img src="第三方接口地址">
从数据库中读取数据也是这种处理
byte[] image = null;//数据库获取
ServletOutputStream outputStream = response.getOutputStream();
outputStream.write(image);
2.Data URI Scheme:数据URI处理方案
形如下面所示时为Data URI Scheme,其中encode为base加密的文件流,适用数据量小的时候。当使用的使用可以通过ajax等给src动态赋值
<img src="data:image/png;base64,encode">
当第三方返回的为encode之后的数据时可以直接使用该种方式,和从本地获取的方式类似,以本地处理为例
@GetMapping("/getImageBase64")
public String getImageBase64() throws IOException {
try {
ClassPathResource resource = new ClassPathResource("images/12.jpeg");
InputStream inputStream = resource.getInputStream();
BufferedInputStream bis = new BufferedInputStream(inputStream);
ByteArrayOutputStream bos = new ByteArrayOutputStream();
int bytesRead;
byte[] buff = new byte[1024];
while ((bytesRead = bis.read(buff, 0, buff.length)) != -1) {
bos.write(buff, 0, bytesRead);
}
bos.flush();
bis.close();
bos.close();
//encode处理
BASE64Encoder base64Encoder = new BASE64Encoder();
String encode = base64Encoder.encode(bos.toByteArray());
log.info("imageBase64:{}", encode);
return encode;
} catch (Exception e) {
log.error(e.getMessage(), e);
throw e;
}
}
总的来说,不论是通过接口调用还是对本地的处理,好用的的方式是对数据流做encode处理,通过response直接输出,前台直接通过src指向后台即可。