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

I develop a custom messenger application which sends message from client(Android) to another client(web). My problem is when I send image file, I encoded it to Base64 string and then send it to another client. When the recipient client is Android, the app successfully decoded the Base64 String to bitmap image. But when the recipient client is web app, the web application failed to decode and display it using :

我开发了一个定制的messenger应用程序，它从客户端(Android)向另一个客户端(web)发送消息。我的问题是，当我发送图像文件时，我将它编码到Base64字符串，然后发送给另一个客户端。当接收端为Android时，应用程序成功将Base64字符串解码为位图图像。但当接收方客户端是web应用时，web应用程序无法解码并显示:

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

My Java encode/decode method

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

I've tried to change the encoding method to Base64.DEFAULT, but still the Base64 String cannot be displayed in HTML using data:image/jpeg;base64. Is there any differences between Android Base64 string and Base64 string used to display image in HTML? Please suggest me the solution. Thanks

我尝试将编码方法改为Base64。默认，但是仍然不能使用data:image/jpeg; Base64在HTML中显示Base64字符串。Android Base64字符串和用于在HTML中显示图像的Base64字符串之间有什么区别吗?请给我建议解决办法。谢谢

EDIT :

编辑:

This is the base64 string example generated from my Android application, with padding. I failed to display it on html/web, although it can be displayed fine on Android :

这是我的Android应用程序生成的base64字符串示例，带有填充。我没有在html/web上显示它，虽然在Android上可以很好地显示:

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

2 个解决方案

#1

I had a similar issue where I wanted to convert an Android generated BASE64 string to Binary with Javascript and atob function was keep giving me errors. My first guess was like yours to use URL_SAFE instead of DEFAULT, but none of them worked, then I figure it out that I need to use Base64.NO_WRAP method to get it working. I tested Base64.NO_WRAP and displaying inline image and IT WORKED!!!!

我也遇到过类似的问题，我想用Javascript把Android生成的BASE64字符串转换成二进制，atob函数不断地给我出错。我的第一个猜测是使用URL_SAFE而不是默认值，但它们都不起作用，然后我发现我需要使用Base64。NO_WRAP方法使其工作。我测试了Base64。NO_WRAP和显示内联图像，它工作了!!!

Hope this save you some nerves, because I did had some till I figure it out how to do it.

希望这不会让你太紧张，因为在我弄明白怎么做之前，我确实有过一些紧张。

So to give the nice answer, change: return Base64.encodeToString(bytes, Base64.URL_SAFE); to this: return Base64.encodeToString(bytes, Base64.NO_WRAP);

所以要给出漂亮的答案，改变:返回Base64。encodeToString(字节,Base64.URL_SAFE);:返回Base64。encodeToString(字节,Base64.NO_WRAP);

#2

can you try with this for me it's working fine one two change only Base64.DEFAULT insted of URL_SAFE and image tag alt. just check it.

你能帮我试试这个吗?它很好用。URL_SAFE和image标签的默认insted。

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

#1