前言
最近真的被图片上传的功能给烦恼了。在 web 的项目中，我们经常会有上传图片的业务场景，最典型的是上传头像。为了解决头像上可以有如下的实现：
使用 multipart/form-data 上传用户信息和头像，也即是使用 html 里面的<form></form>。如 gitlab 中修改用户信息的头像。
先将图片上传到图片服务，并获取图片连接，之后再用这个图片连接修改用户信息。
直接上传图片的 Base64 编码信息，作为图片的数据，后台再将编码转化为图片文件。
这里将讨论的是第三中实现方法的中的图片与 Base64 编码互转。
在网页中，会有如下两种处理图片的方式，一种是直接src="/avatar/avatar.jpg"，另一种则是 src="data:image/jpeg;base64,xxxxxx="的方式。第二种方式就是前端将发给后台的内容，数据由[数据描述],[数据 Base64]组成，[数据描述]将告知我们该图片的类别，可以从中分析出图片的拓展名，[数据 Base64]为图片 Base64 编码之后的数据，为图片文件完整的数据。为了能够完整地回复图片的内容和拓展名，需要前端发送[数据描述],[数据Base64]到后台。该格式其实是Data URI Scheme，完整后面再做讲解。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <p>Data URLs Image:</p> <!-- 常见的方式 --> <img src="/avatar/avatar.jpg"> <!-- 将 img.src 的内容复制粘贴到浏览器的输入框中，可以看到图片的内容 --> <img src="data:image/jpeg;base64,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" /></body></html>
复制代码
从 [数据描述] 判断图片拓展名
具体实现
数据描述与拓展名的映射
这里利用两个 map，分别记录数据描述映射到拓展名和拓展名映射到数据描述，从而方便数据描述和拓展名的获取。
import java.util.HashMap;import java.util.Map;import java.io.File;
public class ImageDataURISchemeMapper { private static Map<String, String> scheme2Extension = new HashMap<String, String>(); private static Map<String, String> extension2Scheme = new HashMap<String, String>(); static { initSchemeSupported(); }
public static String getScheme(String imageExtension) { if (imageExtension == null || imageExtension.isEmpty()) { return ""; } String result = extension2Scheme.get(imageExtension.toLowerCase()); return result == null ? "" : result; }
public static String getScheme(File image) { if (image == null) { return ""; } String name = image.getName(); int lastPointIndex = name.lastIndexOf("."); return lastPointIndex < 0 ? "" : getScheme(name.substring(lastPointIndex + 1)); } public static String getExtension(String dataUrlScheme) { return scheme2Extension.get(dataUrlScheme); }
public static String getExtensionFromImageBase64(String imageBase64, String defaultExtension) { int firstComma = imageBase64.indexOf(","); if(firstComma < 0) { return defaultExtension; } return scheme2Extension.get(imageBase64.subSequence(0, firstComma + 1)); } private static void initSchemeSupported() { addScheme("jpg", "data:image/jpg;base64,"); addScheme("jpeg", "data:image/jpeg;base64,"); addScheme("png", "data:image/png;base64,"); addScheme("gif", "data:image/gif;base64,"); addScheme("icon", "data:image/x-icon;base64,"); } private static void addScheme(String extension, String dataUrl) { scheme2Extension.put(dataUrl, extension); extension2Scheme.put(extension, dataUrl); }}
复制代码
图片转 Base64 及 Base64 转图片
图片转 Base64:
将图片文件读取为数据流，并转化为 byte 数组
将 byte 数组进行 Base64 编码，并转化为字符串
根据文件的拓展名添加数据描述前缀
Base64 转图片:
将 Base64 字符串分成数据描述和数据 Base64 两个部分
通过数据描述部分获得图片拓展名
将数据 Base64 进行 Base64 解码，得到 byte 数组
保存 byte 数组到文件，如果保存的文件路径提供完整的文件名称，则无需所得拓展名，否则使用所得拓展名作为图片文件拓展名
import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import java.nio.charset.StandardCharsets;import java.util.Base64;import java.util.HashMap;import java.util.Map;
import org.apache.commons.io.IOUtils;
/** * 目标处理的图片类别有：png，jpg，jpeg * * 参考： * <ul> * <li>[浅析data:image/png;base64的应用](https://www.cnblogs.com/ECJTUACM-873284962/p/9245474.html)</li> * <li>[Base64](https://zh.wikipedia.org/wiki/Base64)</li> * <li>[Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) * </ul> * * @author Donespeak * @date 2019/06/26 */public class ImageConvertBase64 {
/** * 将图片文件转化为 byte 数组 * * @param image * 待处理图片文件 * @return 图片文件转化为的byte数组 */ public static byte[] toBytes(File image) { try (FileInputStream input = new FileInputStream(image)) { // InputStream 的 available() 返回的值是该InputStream 在不被阻塞的情况下，一次可以读取到的数据长度。 // byte[] imageBytes = new byte[input.available()]; // input.read(imageBytes); return IOUtils.toByteArray(input); } catch (IOException e) { return null; } }
public static String toBase64(byte[] bytes) { return bytesEncode2Base64(bytes); } /** * 将图片转化为 base64 的字符串 * * @param image * 待处理图片文件 * @return 图片文件转化出来的 base64 字符串 */ public static String toBase64(File image) { return toBase64(image, false); } /** * 将图片转化为 base64 的字符串。如果<code>appendDataURLScheme</code>的值为true，则为图片的base64字符串拓展Data URL scheme。 * @param image 图片文件的路径 * @param appendDataURLScheme 是否拓展 Data URL scheme 前缀 * @return 图片文件转化为的base64字符串 */ public static String toBase64(File image, boolean appendDataURLScheme) { String imageBase64 = bytesEncode2Base64(toBytes(image)); if(appendDataURLScheme) { imageBase64 = ImageDataURISchemeMapper.getScheme(image) + imageBase64; } return imageBase64; }
private static String bytesEncode2Base64(byte[] bytes) { return new String(Base64.getEncoder().encode(bytes), StandardCharsets.UTF_8); }
private static byte[] base64Decode2Bytes(String base64) { return Base64.getDecoder().decode(base64); }
/** * 将byte数组恢复为图片文件 * * @param imageBytes * 图片文件的 byte 数组 * @param imagePath * 恢复的图片文件的保存地址 * @return 如果生成成功，则返回生成的文件路径，此时结果为参数的<code>imagePath</code>。否则返回 null */ public static File toImage(byte[] imageBytes, File imagePath) { if (!imagePath.getParentFile().exists()) { imagePath.getParentFile().mkdirs(); } try (BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(imagePath))) { bos.write(imageBytes); return imagePath; } catch (IOException e) { return null; } }
/** * 将base64字符串恢复为图片文件 * * @param imageBase64 * 图片文件的base64字符串 * @param imagePath * 恢复的图片文件的保存地址 * @return 如果生成成功，则返回生成的文件路径，此时结果为参数的<code>imagePath</code>。。否则返回 null */ public static File toImage(String imageBase64, File imagePath) { // base64 字符串中没有 "," int firstComma = imageBase64.indexOf(","); if(firstComma >= 0) { imageBase64 = imageBase64.substring(firstComma + 1); } return toImage(base64Decode2Bytes(imageBase64), imagePath); }
/** * 保存 imageBase64 到指定文件中。如果<code>fileName</code>含有拓展名，则直接使用<code>fileName</code>的拓展名。 * 否则，如果 <code>imageBase64</code> 为Data URLs，则更具前缀的来判断拓展名。如果无法判断拓展名，则使用“png”作为默认拓展名。 * @param imageBase64 图片的base64编码字符串 * @param dir 保存图片的目录 * @param fileName 图片的名称 * @return 如果生成成功，则返回生成的文件路径。否则返回 null */ public static File toImage(String imageBase64, File dir, String fileName) { File imagePath = null; if(fileName.indexOf(".") < 0) { String extension = ImageDataURISchemeMapper.getExtensionFromImageBase64(imageBase64, "png"); imagePath = new File(dir, fileName + "." + extension); } else { imagePath = new File(dir, fileName); } return toImage(imageBase64, imagePath); }}
复制代码
利用第三方工具类简化代码。
这里使用的工具类为 org.apache.commons.io.*:
<!-- https://mvnrepository.com/artifact/commons-io/commons-io --><dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.6</version></dependency>
复制代码
获取文件拓展名
int lastPointIndex = filename.lastIndexOf(".");String extension = lastPointIndex < 0 ? "" : getScheme(filename.substring(lastPointIndex + 1));// 简化String extension = FilenameUtils.getExtension(filename);
复制代码
文件转 byte[]
File image = new File("avatar.jpg");IOUtils.toByteArray(new FileInputStream(image));// 或者byte[] bytes = FileUtils.readFileToByteArray(image);
复制代码
byte[] 保存为文件
File image = new File("avatar.jpg")FileUtils.writeByteArrayToFile(image, bytes);
复制代码
实现图片转 Base64 和 Base64 转图片的代码其实就只要如下的几行代码。
public static void main(String[] args) throws IOException { File image = new File("src/test/resources/imageConvertBase64.jpeg"); File newImage = new File("src/test/resources/new-imageConvertBase64.jpeg");
// 编码为 Base64 字符串 byte[] bytes = FileUtils.readFileToByteArray(image); String base64 = new String(Base64.getEncoder().encode(bytes), StandardCharsets.UTF_8); System.out.println(base64); // Base64 保存为图片 bytes = Base64.getDecoder().decode(base64); FileUtils.writeByteArrayToFile(newImage, bytes);}
复制代码
拓展知识
Data URLs
Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.
-- Data URLs @Mozilla
Data URLs 由如下四个部分组成，如文章开篇的 data:image/jpeg;base64,/9j/4AAQSkxxxxxxx。
data:[<mediatype>][;base64],<data>
复制代码
data: : 协议固定前缀。
[<mediatype>] : 是一个 MIME type，比如 image/jpeg，你也可以在 ["Incomplete list of MIME types"
](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types)中找到一些类型。
[;base64] : 是编码方式。 这里用的 base64。
<data> : 编码后的字符串。
Data URL schema 是在 RFC2397 中被定义的 URL scheme。其有如下的优缺点：
优点
缺点
目前 Data URL schema 支持的类型有：
更加详细的内容可以看：浅析data:image/png;base64的应用 @Angel_Kitty
Base64
Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法。任何数据都是二进制数据，也就是说 Base64 可以表示任何数据。Base64 常用于在通常处理文本数据的场合，表示、传输、存储一些二进制数据，包括 MIME 的电子邮件及 XML 的一些复杂数据。其主要的主要作用不在于安全，而在于让数据在网络中无错传输。
由于 2^6=64，所以每 6 个 bit 为一个单元，对应某个可打印字符。3 个字节（byte）有 24 个 bit，对应于 4 个 Base64 单元（24/6=4），即 3 个字节可由 4 个可打印字符来表示。这就导致编码后的数据比原始数据增加了 1/3 的长度。每 6 个 bit 的取值按照 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/ 进行选择。如原数据长度不是 3 的倍数，则剩下一个输入字符，添加一个=，两个输入字符，编码结果则增加一个=。
编码「Man」
在最后的一位（A）或者两位字符（BC）时进行编码
解码
编码的逆过程，将 = 转化为 0 即可，在 ASCII 码中，0 字符为空字符。
以上的内容基本来自 维基百科 Base64。由于+/的特殊性，为了适应不同的场景，会使用不同的字符替换掉原来算法中的 +/，而形成新的算法。
在 Java 8 中，JDK 提供了 Base64 的编解码工具。提供了 Basic编码 URL编码 MIME编码 以及 对流的封装，文章 Java 8实现BASE64编解码 中对 Base64 工具做了不错的介绍。
Base64 转化工具：
评论