将Android的Base64位图转换为HTML的Base64图片并显示

Question

我正在开发一个定制的通讯应用，用于从客户端(Android)向另一个客户端(Web)发送消息。我的问题是当我发送图像文件时，我将它编码为Base64字符串，然后将其发送给另一个客户端。当接收方客户端是Android时，该应用成功地将Base64字符串解码为位图图像。但是当接收方客户端是web应用程序时，Web应用程序无法解码和显示它使用：

<img id="img" src="data:image/jpeg;base64,3iVBORw0KGgoAAAANSU...">

我的Java编码/解码方法

    public static Bitmap base64StringToBitmap(String base64) {
        byte[] bytes = Base64.decode(base64, Base64.URL_SAFE);
        return BitmapFactory.decodeByteArray(bytes, 0, bytes.length);
    }

    public static String bitmapToBase64String(Bitmap bmp, Bitmap.CompressFormat format, int quality) {
        ByteArrayOutputStream baos = new ByteArrayOutputStream();  
        bmp.compress(format, quality, baos);
        byte[] bytes = baos.toByteArray();
        return Base64.encodeToString(bytes, Base64.URL_SAFE);
    }

我尝试将编码方式更改为Base64.DEFAULT，但是仍然无法在HTML中使用data:image/jpeg;base64显示Base64字符串。Android Base64字符串和用于在HTML中显示图像的Base64字符串之间有什么区别吗？请给我建议解决方案。谢谢。

编辑：

这是从我的Android应用程序生成的带填充的base64字符串示例。虽然它可以在Android上正常显示，但我无法在html/web上显示它：

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

- Hafizh Herdi

Answer 1

我曾遇到类似问题，想用Javascript将Android生成的BASE64字符串转换为二进制，但使用atob函数时一直出错。我的第一个猜测与你一样，是使用URL_SAFE而不是DEFAULT，但两者都无效。后来我发现需要使用Base64.NO_WRAP方法才能使其正常工作。我测试了Base64.NO_WRAP并显示了内联图像，它确实有效！

希望这篇文章能让你省去一些烦恼，因为我在找到解决方法之前也有些焦虑。

所以，为了给出正确的答案，请将：return Base64.encodeToString(bytes, Base64.URL_SAFE); 改为：return Base64.encodeToString(bytes, Base64.NO_WRAP);

- Emil Borconi

---

好的，让我试试这个 :) - Hafizh Herdi

仍未在HTML中显示，但我可以将其保存为图像文件 :) - Hafizh Herdi

这是一个解决办法，但我不明白为什么它不能直接在HTML中显示，它应该可以。你尝试在多个浏览器中吗？它可能在某个特定的浏览器中没有显示出来吗？ - Emil Borconi

嘿，我在多个浏览器上尝试了它，仍然没有显示。 - Kunal

Answer 2

您能为我尝试一下吗？只需要更改Base64.DEFAULT而不是URL_SAFE和图像标记alt，就可以正常工作。请检查一下。

<img height=700px src='data:image/jpg;base64,"+encodeString+"' alt='Embeded Image'/>

public static String bitmapToBase64String(Bitmap bmp, Bitmap.CompressFormat format, int quality) {
    ByteArrayOutputStream baos = new ByteArrayOutputStream();  
    bmp.compress(format, quality, baos);
    byte[] bytes = baos.toByteArray();
    return Base64.encodeToString(bytes, Base64.DEFAULT);
}

- PankajAndroid

---

不行，不起作用。你能把位图转换成Base64的方法发一下吗？我还注意到，在Android转换后，Base64字符串的长度比使用JavaScript或在线转换工具的结果更长。 - Hafizh Herdi

@HafizhHerdi，你遇到了什么问题？你是使用Base64.java文件解析base64还是导入了该文件？ - PankajAndroid

使用标准的android.util.Base64包 - Hafizh Herdi