我使用 org.apache.axis.encoding.Base64 将图像编码为 base64类(class)。我的代码:
public String get64EncodedPhotoForUser(User user) {
// Path to image
String path = "some path to the jpg file on the server";
// Read image from server
String base64Image = null;
try {
BufferedImage bufferedImage = ImageIO.read(new File(path));
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(bufferedImage, "jpg", baos);
baos.flush();
byte[] imageInByte = baos.toByteArray();
baos.close();
base64Image = Base64.encode(imageInByte);
} catch (Exception e) {
System.out.println(e.getMessage());
}
return base64Image;
}
如您所见,我首先将图像转换为字节数组,因为这是编码方法所期望的。一切似乎都正常,我取回了编码字符串,它似乎是一个正确编码的字符串。值得一提的是,一些在线解码器可以正确解码图像,而另一些则不能,我认为这很奇怪..
当我尝试在我的 HTML 中显示图像时:
<img ng-src="data:image/png;base64,/9j/4AAQSkZJRgABAgAAA..." id="avatar">
这是行不通的。当您将您的 html 指向不存在的图像时,我只是得到那个“缺少图像”图标。
我已经将编码后的字符串复制并粘贴到一个 jsfiddle 中,您可以查看 here
PS - 我还采用了 base64 字符串,并将它与其他一些东西一起从服务器传递到 JSON 对象中的客户端。您在 jsfiddle 中看到的 Base64 字符串是我在客户端返回的内容。编码字符串在通过网络传输时是否可能已被损坏或修改?
最佳答案
Base 64 编码字符串末尾的等号已转换为其 unicode 格式 ( \u003d
):
/9j/4AAQSkZJR...IQd6QknrS54460h60BY//9k\u003d
^ ^
start end
当我更改 \u003d
在字符串末尾为 =
在我的 <img>
标记,图像在我的 Chrome 浏览器中加载正常。这是我用来加载图像的代码:
<IMG src="data:image/jpeg;base64,/9j/4AAQSkZJR...IQd6QknrS54460h60BY//9k=">
请注意,删除 unicode 字符似乎在浏览器中也有效。
发生了什么:
我使用 Apache Axis 测试了您的 Java 代码 Base64.encode()
方法,并且输出看起来是正确的,即字符串按预期以等号结尾。但是,在您提供的 JS Fiddle 中,出现了 unicode 字符。基于this GitHub blog , 看来 Gson
由于某种原因,库 HTML 转义了最后一个字符。不管它是错误还是不良功能,Gson
提供了一种方法来解决这个问题:
Gson gson = new GsonBuilder().disableHtmlEscaping().create();
使用此版本的 Gson
构建您的 JSON 对象对象,你不应该有转义问题。
关于java - 用 Java 编码的 Base64 图像不显示在 HTML 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32266321/