图片转化为base64及上传

最新推荐文章于 2024-07-15 00:00:26 发布

智_永无止境

最新推荐文章于 2024-07-15 00:00:26 发布

阅读量1.1w

点赞数 1

分类专栏：朝花夕拾篇文章标签：图片 base64 上传图片转化

本文链接：https://blog.csdn.net/static_coder/article/details/78072171

版权

朝花夕拾篇专栏收录该内容

29 篇文章 2 订阅

订阅专栏

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、参考文档

http://www.cnblogs.com/chillaxyw/p/5783341.html 【博文】
https://developer.mozilla.org/en-US/docs/Web/API/FileReader 【FileReader官方文档】

智_永无止境

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
图片转化为base64及上传

1、前言很多时候我们需要将图片转化成base64，并且上传。这里整理了一些关于图片转化base64的方法，方便以后使用。2、页面demohtml&gt;head lang=&quot;en&quot;&gt; meta charset=&quot;UTF-8&quot;&gt; title&gt;图片转化成Base64title&gt;head&gt;
复制链接

扫一扫

专栏目录