用Java编码的Base64图像不以HTML格式显示

时间:2015-08-28 08:11:29

标签: java html image encoding base64

我使用org.apache.axis.encoding.Base64类将图像编码到base64中。我的代码:

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字符串是我在客户端返回的内容。当它通过网络传递时,编码的字符串是否可能已被破坏或修改?

2 个答案:

答案 0 :(得分:2)

基本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 Base64.encode()方法测试了您的Java代码,输出看起来正确,即字符串以预期的等号结束。但是,在您提供的JS Fiddle中,会出现unicode字符。基于this GitHub blog,似乎Gson库HTML由于某种原因转义了最后一个字符。无论是一个错误还是一个糟糕的功能,Gson提供了解决此问题的方法:

Gson gson = new GsonBuilder().disableHtmlEscaping().create();

使用此版本的Gson对象构建您的JSON对象,您不应该遇到转义问题。

答案 1 :(得分:1)

在您的Java中,您正在编写jpg图像,但是您将其作为png以HTML格式显示。