转换 Android Base64 位图并在 HTML Base64 图像上显示

Question

我开发了一个自定义信使应用程序，它将消息从客户端（Android）发送到另一个客户端（网络）。我的问题是当我发送图像文件时，我将其编码为Base64 字符串，然后将其发送给另一个客户端。当接收方客户端为 Android 时，应用成功将Base64 String 解码为位图图像。但是当接收客户端是网络应用程序时，网络应用程序无法解码并显示它使用：

<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，但仍然无法使用data:image/jpeg;base64 在HTML 中显示Base64 字符串。 Android Base64 字符串和用于在 HTML 中显示图像的Base64 字符串之间有什么区别吗？请建议我解决方案。谢谢

编辑：

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

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

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);

E

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);
}