关于base64用解码后无法正常显示图片的问题

我在前端把图片先转化为base64编码后,用axios传回后端然后解码写入文件后发现图片无法正常显示。经过对比前端生成的base64编码和后天接收到的base64编码发现,用axios传输的时候会把编码中的斜杠 / 给转化成十六进制形式:%2F,并且有时候收到的编码结尾会出现等号,所以我用网上找的解码代码会失效。

解决方法：

把%2F重新转换成/,然后把等号去掉即可 

这里注意一个问题:如果你的base64编码中带有 data:image/png;base64,    那么一定要记得去掉再用下面的代码进行解码。可以在这个网站中进行base64编码和图片的相互转换

http://tool.chinaz.com/tools/imgtobase

,此时一定要记得带上data:image/png;base64, 注意前端js中用 let dataURL = canvas.toDataURL("image/png");生成的base64编码是带有data这个头的,记得要处理掉

 

下面是网上找的java版Base64解码和加密的代码,具体存储的文件路径之类的自己设置即可

宿舍

import java.io.*;
import org.junit.Test;
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;



@SuppressWarnings("restriction")
public class Base64Util1 {
    public static boolean Base64ToImage(String imgStr,String imgFilePath) {
        try {
            // Base64解码
            byte[] b = new BASE64Decoder().decodeBuffer(imgStr);
            for (int i = 0; i < b.length; ++i) {
                if (b[i] < 0) {// 调整异常数据
                    b[i] += 256;
                }
            }
            OutputStream out = new FileOutputStream(imgFilePath);
            out.write(b);
            out.flush();
            out.close();
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
    }
    /**
     * 图片转base64字符串
     * @param imgFile 图片路径
     * @return
     */
    public static String imageToBase64Str(String imgFile) {
        InputStream inputStream = null;
        byte[] data = null;
        try {
            inputStream = new FileInputStream(imgFile);
            data = new byte[inputStream.available()];
            inputStream.read(data);
            inputStream.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        // 加密
        BASE64Encoder encoder = new BASE64Encoder();
        return encoder.encode(data);
    }
    @Test
    public void test1(){
        String s = Base64Util1.imageToBase64Str("C:\\Users\\86183\\Desktop\\3.png");
        System.out.println(s);
        String filePath = System.getProperty("user.dir")+System.getProperty("file.separator")+"img"+System.getProperty("file.separator")+"1.png";


        System.out.println( Base64Util1.Base64ToImage(s,filePath));
    }
}

 下面是base64的编码字符(没有%)

下面是一些特殊符号对应的十六进制值