Base64:

Base64是一种编码方式，基于64个ASCII字符来表示二进制数据，Base64将8个bit为一个单位的字节数据拆分为以6个bit为一个单位的二进制片段，每6个bit单位对应Base64索引表中的一个字符；

Base64中64个可打印字符包括 字母 A-Z; a-z; 数字 0-9；特殊字符 +；/；数值分别是0-63；共64个

# JS 处理 上传图片 Base64编码 展示

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <%@ taglib prefix="c" uri="http://www.springframework.org/tags" %>
 3 
 4 
 5     
 6     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 7     
 8 
 9 
10 

11     

12         

13             
14             
15         
16     
17 
18 <script>
19 
20     function uploadImg() {
21         var file = document.querySelector('input[type=file]').files[0];
22         var reader = new FileReader();
23         reader.onload = function () {
24             $("#imgBase").attr("style","display:inline-block");
25             $("#imgBase").attr("src", reader.result);
26         }
27         if (file) {
28             reader.readAsDataURL(file);
29         }
30     }
31 </script>
32 
33 

# JS 项目中的图片通过Base64编码 展示

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <%@ taglib prefix="c" uri="http://www.springframework.org/tags" %>
 3 
 4 
 5     
 6     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 7     
 8 
 9 
10 

11     

12         

13             
14             <%--项目中的图片--%>
15             
16         
17     
18 
19 <script>
20     var image = new Image();
21     image.src = $("#osn_search_input").val();
22     image.onload = function () {
23         var base = setImageBase64(image);
24         $("#imgBase").attr("style", "display:inline");
25         $("#imgBase").attr("src", base);
26         console.log(base);
27     };
28     
29     function setImageBase64(image) {
30         var canvas = document.createElement("canvas");
31         canvas.width = image.width;
32         canvas.height = image.height;
33         var ctx = canvas.getContext('2d');
34         ctx.drawImage(image, 0, 0, image.width, image.height);
35         var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();
36         var imgUrl = canvas.toDataURL("image/" + ext);
37         return imgUrl;
38     }
39 </script>
40 
41 

# 从服务器获取图片 并进行Base64 编码 返回页面

package com.mvc.controller;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.alibaba.fastjson.serializer.SerializerFeature;
import com.mvc.model.LoginUser;
import com.mvc.model.User;
import com.mvc.service.LoginService;
import jdk.internal.util.xml.impl.Input;
import org.omg.CORBA.StringHolder;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.View;
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;
import java.io.*;
import java.net.URL;
import java.net.URLConnection;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.concurrent.ExecutionException;
import java.util.concurrent.Future;

@Controller
public class LoginController {
//    private static final Logger log = LoggerFactory.getLogger(LoginController.class);

    @Autowired
    @Qualifier("asyncLoginService")
    private LoginService loginService;

    @RequestMapping("qrcode")
    public String qrcode(HttpServletResponse response,HttpServletRequest request){
        System.out.println("begin qrcode...");
        return "qrcode";
    }

    @RequestMapping("getQRCode")
//    @ResponseBody
    public void getQRCode(HttpServletResponse response,HttpServletRequest request, PrintWriter pw, Long fileId){
        System.out.println("begin getQRCode..." + fileId);
        byte[] bytes = null;
        try (FileInputStream fis = new FileInputStream(filePath)){
            bytes = new byte[fis.available()];
            fis.read(bytes);
        } catch (Exception e) {
            // 抛异常
        }
        BASE64Encoder encoder = new BASE64Encoder();
        String encode = encoder.encode(bytes);

        response.setContentType("image/jpeg");
        response.setHeader("Pragma","No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expire", 0);
        pw.write(encode);
        pw.flush();
        pw.close();
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://www.springframework.org/tags" %>


    
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    



    

        
    

    

        
二维码
        

            

                
            
        
    

<script>
    function showImg() {
        var divs = document.getElementsByClassName("img-div")[0];
        // 每次点击都删除之前的图片
        for (var i = 1; i < divs.childElementCount; i++) {
            console.log(divs.children);
            divs.children[i].remove();
        }
        var fileId = divs.firstElementChild.value;
        console.log(fileId);
        var img = document.createElement("img");
        divs.appendChild(img);
        var src = document.createAttribute("src");
        img.setAttributeNode(src);
        divs.style.cssText = "display:inline;";
        img.style.cssText = "width: 200px; height: 200px;";
        $.ajax({
            url: "getQRCode",
            type: "get",
            dataType: "text",
            data: {
                fileId: fileId
            },
            success: function (data) {
                img.src = "data:image/jpeg;base64," + data;
            }
        });
        var div = document.getElementById("div");
        div.style.cssText = "display:inline;";
    }
</script>