BASE64处理文件
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 %@页面内容类型=' text/html；charset=UTF-8 '语言='java' %
2 %@ taglib前缀=' c ' uri=' http://www。弹簧框架。组织/标签' %
3 html
四头
5标题主页/标题
6脚本src=' https://代码。jquery。com/jquery-3。1 .1 .量滴js /脚本
7 !-引入元素用户界面样式-
8/头
9车身
10个分区
11区
12区
13 img src=' style=' display : no '
14输入类型='变更时的' file '=' uploadImg()；'名称='文件'
15 /div
16 /div
17 /div
18脚本
19
20函数uploadImg(){ 0
21 var文件=文档。query selector(' input[type=file]').文件[0];
22 var reader=new FileReader()；
23个读者。onload=function(){ 0
24美元(' #imgBase ').attr('style '，' display : inline-block ')；
25美元(' #imgBase ').attr('src '，阅读器。结果)；
26 }
27 if(文件){ 0
28 reader.readAsDataURL(文件);
29 }
30 }
31/脚本
32/车身
33 /html
# JS 项目中的图片通过Base64编码 展示
1 %@页面内容类型=' text/html；charset=UTF-8 '语言='java' %
2 %@ taglib前缀=' c ' uri=' http://www。弹簧框架。组织/标签' %
3 html
四头
5标题主页/标题
6脚本src=' https://代码。jquery。com/jquery-3。1 .1 .量滴js /脚本
7 !-引入元素用户界面样式-
8/头
9车身
10个分区
11区
12区
13 img src=' style=' display : no '
14 % - 项目中的图片- %
15输入id='osn_search_input '类型='隐藏'值='c:url值='/img/hello.png'/'
16 /div
17 /div
18 /div
19脚本
20 var Image=新图像()；
21形象。src=$(' # osn _ search _ input ').val()；
22形象。onload=function(){ 0
23 var base=setImageBase64(图像);
24美元(' #imgBase ').attr('style '，' display : inline ')；
25美元(' #imgBase ').attr('src '，base)；
26控制台。原木(基础)；
27 };
28
29函数setImageBase64(图像){ 0
30 var canvas=文档。create element(' canvas ')；
31 canvas.width=imag
e.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 /body
41 /html
# 从服务器获取图片 并进行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" %
html
head
titleHOME/title
script src="https://code.jquery.com/jquery-3.1.1.min.js"/script
!-- 引入 element ui 样式 --
/head
body
div
div
input type="button" value="show" onclick="showImg();"/
/div
div
p style="color: red"二维码/p
div style="display: none"
div class="img-div" style="display: inline"
input type="hidden" value="111111"/
/div
/div
/div
/div
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
/body
/html
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/157177.html