1. 程式人生 > >利用localResizeIMG將圖片壓縮轉為base64上傳

利用localResizeIMG將圖片壓縮轉為base64上傳

在進行圖片上傳的時候,因為有些圖片太大,為了減輕伺服器的壓力,我們需要將圖片進行壓縮上傳。今天總結一下利用localResizeIMG如何將圖片壓縮轉為base64上傳,其中localResizeIMG外掛已上傳csdn。
程式碼如下:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>證件上傳</title>
	<link rel="stylesheet" type="text/css" href="http://static.wanlianjin.com/data/m/wlcs/css/abb/common.css" />
	<script src="http://static.wanlianjin.com/data/m/wlcs/js/nocar/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://static.wanlianjin.com/data/m/wlcs/js/nocar/rem.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://static.wanlianjin.com/data/m/wlcs/js/car/fnBase.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="js/binaryajax.js" ></script> 
	<script type="text/javascript" src="js/exif.js" ></script> 
	<script type="text/javascript" src='js/LocalResizeIMG1.js'></script>
	<script src='http://static.wanlianjin.com/data/m/wlcs/js/car/mobileBUGFix.mini.js' type="text/javascript" charset="utf-8" ></script>
	<style>
		* {
			box-sizing: border-box;
		}
		body,
		html {
			height: 100%;
		}
		.content li{
			width:6.04rem;
			height:3.22rem;
			margin:0.18rem auto 0;
			position:relative;
		}
		.content li .tishi{
			width:6.04rem;
			height:3.22rem;
			position:absolute;
			top:0;
			left:0;
			display:none;
		}
		.active{
			display:block !important;
			z-index:9999;
		}
		.content li img{
			position:absolute;
			width:100%;
			height:100%;
			top:0;
		}
		.content li input{
			width:1.2rem;
			height:1.3rem;
			position:absolute;
			top:0.74rem;
			left:2.47rem;
			opacity:0;
		}
	</style>
</head>
<body>
	<ul class="content">
		<li id="DP">
			<div class="tishi tishi1" onclick="upload('.DP','#_dp','.tishi1','x','xszj')"></div>
			<img id="_dp" src="../image/paper/upload1.png"/>
			<input class="DP" data-role="none" type="file" accept="image/*"/>
		</li>
		<li id="DL">
			<div class="tishi tishi2" onclick="upload('.DL','#_dl','.tishi2','j','jszj')"></div>
			<img id="_dl" src="../image/paper/upload2.jpg"/>
			<input class="DL" data-role="none" type="file" accept="image/*"/>
		</li>
		<li id="ID">
			<div class="tishi tishi3" onclick="upload('.ID','#_id','.tishi3','s','sfzj')"></div>
			<img id="_id" src="../image/paper/upload3.png"/>
			<input class="ID" data-role="none" type="file" accept="image/*"/>
		</li>
	</ul>
</body>
<script type="text/javascript">
	var n = 0;
	sessionStorage.xszj='';
    sessionStorage.jszj='';
    sessionStorage.sfzj='';
    sessionStorage.setItem("imgpath","");
    sessionStorage.b64data="";
    //安卓呼叫本方法,獲取引數,進行回顯
    function showPic(str){
        var strType = str.slice(0,1);

        var strSrc = str.slice(1);
        if(strType == 'x') {
        	$('#_dp').attr('src',strSrc);
        	$('.tishi1').addClass('active');
        }else if(strType == 'j'){
        	$('#_dl').attr('src',strSrc);
        	$('.tishi2').addClass('active');
        }else{
        	$('#_id').attr('src',strSrc);
        	$('.tishi3').addClass('active');
        }
	}
	//ios頁面回顯
    compress('.DP',0.8,'#_dp','.tishi1');
	compress('.DL',0.8,'#_dl','.tishi2');
	compress('.ID',0.5,'#_id','.tishi3');
	function upload(inputCla,imgId,ts,type,card){
		n+=1;
	    var baseStr = $(imgId).attr('src').split(',')[1];
	    console.log(baseStr)
	    var name = 'avator'+n+'.jpg';
	    doUploadByBase64(name,baseStr,ts,type,card);
	}
    //compress壓縮轉換成base64位上傳
    //引數解釋:inputCla:上傳input的class;qua:壓縮圖片的質量(取值為0-1)越大越好;imgId:回顯圖片的id
	function compress(inputCla,qua,imgId,ts){
		$(inputCla).localResizeIMG({
			//width:400  寬度
	        quality: qua,
	        success: function (result) {
	            var img = new Image();
	            img.src = result.base64;
	            /**
	            result.base64:帶圖片型別的base64編碼,可直接用於img標籤的src,如“data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY”;
			    result.clearBase64:不帶圖片型別的編碼,如“/9j/4AAQSkZJRgABAQAAAQABAAD/…2wBDAAYEBQYFBAY”
				*/
	            $(imgId).attr('src' , img.src);
	            $(ts).addClass('active');
	        }    
		}) 
	}
	//上傳base64位的圖片
	function doUploadByBase64(name,baseStr,ts,type,card) {
		fnBase.loadShow()
		$('.loading').css('z-index','99999')
		sessionStorage.b64data=baseStr;
		var obj = new Object();
		obj.name = name;
		obj.base64 =baseStr;
		sessionStorage.setItem(card,baseStr);
		obj.type = type;
		console.log(obj)
		$.ajax({
			url:'/upload',
			type:'POST',
			contentType:"application/json",
			data:JSON.stringify(obj),
			success:function(result){
				//如果返回{code:0},則跳轉頁面
				if(result.code=='0'){
					fnBase.loadHide()
					$(ts).removeClass('active');
					window.location.href="addDP.html";
					//window.location.href="route?des="+result.des;
					sessionStorage.setItem("data",result.data);
					sessionStorage.setItem("dlimgpath",result.imgpath);
				}else{
				   fnBase.myalert(result.errinfo);
				}   
			}
		});
	}
</script>
</html>

git地址:https://github.com/zhangstar1331/upload-picture.git