1、前言
很多时候我们需要将图片转化成base64,并且上传。这里整理了一些关于图片转化base64的方法,方便以后使用。
2、页面demo
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片转化成Base64</title>
</head>
<body>
<img id="img" src="imge/mm.jpg"><button id="btn">base64</button>
<hr/>
<input type="file" id="imgInput" >
</body>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<!-- 需要引入cropper.js 支持转化-->
<script type="text/javascript" src="js/cropper.js"></script>
<script type="text/javascript">
$(function(){
//将现有的图片转化成base64
$("#btn").click(function(){
var imageSrc = $("#img").attr("src");
var image = new Image();
image.src = imageSrc; //将地址对应图片转化成图片对象
image.onload = function(){
var ext = imageSrc.substring(imageSrc.lastIndexOf(".")+1); //获取扩展名
var base64 = getBase64Image(image,ext);
console.log(base64);
}
});
//将上传的图片文件转化成base64
$("#imgInput").change(function(){
if (typeof (FileReader) === 'undefined') {
console.log("抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!");
return;
}
var file = this.files[0]; //获取文件对象
console.log(file.type); //输出文件类型
if(!/image/.test(file.type)){
return;
};
var reader = new FileReader();
reader.readAsDataURL(file); //读取图片文件
reader.onload = function(){
console.log(this.result);
}
});
});
//将图片转化成base64图片(压缩图片)
function getBase64Image(image,ext){ //可封装公用方法
var quality = 0.7; //比率(压缩比)
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context .clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image,0,0,image.width,image.height);
// 这里是不支持跨域的
var base64 = canvas.toDataURL("image/"+ext, , quality); //需要文件扩展名
return base64;
}
// 将base64图片转化成Blob【该方法未测试】
function convertBase64UrlToBlob(urlData){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/png'});
}
</script>
</html>
3、后台处理
/*
base64图片上传传递json数据,后台需要解析:JSON.stringify(data)
base64的标记是没有用的,可在前台处理。
使用JSON传递数据效率更高
*/
@ResponseBody
@RequestMapping(value="/uploadPicBase64")
public JsonResult uploadCropperPic(HttpServletRequest request){
JSONArray jsonArray = new JSONArray();
try {
// 抓取参数
request.setCharacterEncoding("UTF-8");
StringBuilder sb = new StringBuilder();
//使用流获取文件
try(BufferedReader reader = request.getReader();) {
char[] buff = new char[1024];
int len;
while((len = reader.read(buff)) != -1) {
sb.append(buff,0, len);
}
}catch (IOException e) {
e.printStackTrace();
return null;
}
JSONObject jobject = JSONObject.parseObject(sb.toString());
//获取base64的图片
String imgBase64 = jobject.getString("imgBase64");
//去掉头信息
imgBase64= imgBase64.substring(imgBase64.indexOf(",")+1);
//获取图片的扩展名
String fileName = jobject.getString("fileName");
String extName = fileName.substring(fileName.lastIndexOf(".") + 1);
// 上传图片
String urlString = "";
urlString = dfsService.upload(imgBase64.getBytes(), extName);
if (null != urlString && urlString.startsWith("HTTP Status ")) {
urlString = "";
}
jsonArray.add(getJsonObject(urlString, (urlString == "" ? urlString : ImgUtils.choiceImgUrl("800X600", urlString))));
return new JsonResult(true, jsonArray);
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
4、后记
- 图片的转化需要协助第三方插件,cropper.js
- base64传递的是二进制的文件的json数据,需要使用流来读取。通过解析json获取文件。由于base64数据过长,有可能超过post请求的默认最大限制(2M),超出后后台就会接不到参数。所以使用原始流的方式获取参数。
5、参考文档