HiSEN

Personal Technology Blog

0%

Data URI scheme 利用base64字符串通过image标签显示图片

Posted on Edited on In Symbols count in article: 2.7k Reading time ≈ 2 mins.

目前，Data URI scheme支持的类型有：

  1. data:,文本数据
  2. data:text/plain,文本数据
  3. data:text/html,HTML代码
  4. data:text/html;base64,base64编码的HTML代码
  5. data:text/css,CSS代码
  6. data:text/css;base64,base64编码的CSS代码
  7. data:text/Javascript,Javascript代码
  8. data:text/Javascript;base64,base64编码的Javascript代码
  9. data:image/gif;base64,base64编码的gif图片数据
  10. data:image/png;base64,base64编码的png图片数据
  11. data:image/jpeg;base64,base64编码的jpeg图片数据
  12. data:image/x-icon;base64,base64编码的icon图片数据

Data URL是在本地直接绘制图片，不是从服务器加载，所以节省了HTTP连接，起到加速网页的作用。

也无法获取到图片在服务器上的真实地址

注意：本方法适合于小图片，大图片就不要考虑了，另外IE8以下浏览器不支持这种方法。

用这种方法会加重客户端的CPU和内存负担，总之有利有弊。

前台代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%@ page import="com.hisen.image.ShowImageByBase64" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/5/11
  Time: 18:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="Java" %>
<% String imageStr = ShowImageByBase64.showimage();%>
<html>
<head>
    <title>Title</title>
</head>
<body>
<img src="data:image/png;base64,<%=imageStr%>" alt="base64图片"/>
</body>
</html>

后台代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
package com.hisen.image;

import com.hisen.utils.Base64Util;
import com.hisen.utils.File2ByteArraysUtil;
import Java.io.ByteArrayOutputStream;
import Java.io.File;
import Java.io.FileInputStream;
import Java.io.FileNotFoundException;
import Java.io.IOException;
import sun.misc.BASE64Encoder;

/**
 * <img src="data:image/png;base64,<%=imageStr%>" alt="base64image"/>
 * Created by hisenyuan on 2017/5/11 at 18:44.
 */
public class ShowImageByBase64 {

  public static String showimage() {
    //写相对路径会报错，暂时不知道如何解决
    String imagePath = "C:\\1\\830.jpg";
    byte[] bytes = File2ByteArraysUtil.file2Bytes(imagePath);
    String s = Base64Util.encodeBase64(bytes);
    return s;
  }

  /**
   * sun.misc.BASE64Encoder
   */
  public static String encodeBase64(byte[] str) {
    if (str == null) {
      return null;
    } else {
      BASE64Encoder encoder = new BASE64Encoder();
      try {
        return encoder.encode(str);
      } catch (Exception var3) {
        return null;
      }
    }
  }

  /***
   * file2byte[]
   * @param path
   * @return
   */
  public static byte[] file2Bytes(String path) {
    byte[] buffer = null;
    File file = new File(path);
    try {
      FileInputStream fis = new FileInputStream(file);
      ByteArrayOutputStream bos = new ByteArrayOutputStream(1000);
      byte[] b = new byte[1000];
      int n;
      while ((n = fis.read(b)) != -1) {
        bos.write(b, 0, n);
      }
      fis.close();
      bos.close();
      buffer = bos.toByteArray();
    } catch (FileNotFoundException e) {
      e.printStackTrace();
    } catch (IOException e) {
      e.printStackTrace();
    }
    return buffer;
  }
}
Related Posts