圖片壓縮
2018-04-09
6886
隨著現(xiàn)在手機(jī)的像素越來越高，很多照片動(dòng)輒幾兆甚至十幾兆，上傳后在服務(wù)器端壓縮已經(jīng)越來越不能滿足當(dāng)今的需求。這對(duì)于許多技術(shù)人員來說，處理起來這樣的問題往往不知道該怎么下手，那么專業(yè)的app開發(fā)報(bào)價(jià)燚軒科技下面就跟大家講解一下如何在前端進(jìn)行圖片壓縮后上傳到服務(wù)器。
以上傳單張圖片為例，多張圖片同理，多嵌套一層循環(huán)即可。代碼實(shí)現(xiàn)如下：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圖片壓縮上傳</title>
<link href="css/uploadSingleImg.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="css/style.css" rel="stylesheet"><!--自己書寫input樣式-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/pictureHandle.js"></script>
</head>
<body>
<form>
<!--文件選擇input-->
<h3>文件選擇：</h3>
<input class="btn btn-default" type="file" id="upFile" multiple="multiple" />
<h3>傳給后臺(tái)</h3>
<input class="btn btn-default" type="button" id="upTo" value="提交"/>
<!--后臺(tái)所要獲取的文件base64-->
<h3>后臺(tái)獲取base64文件數(shù)據(jù)：(一個(gè)隱藏域)</h3>
<input id="imgOne" name="imgOne" type="hidden"/>
<!--所選文件壓縮前預(yù)覽-->
<h3>壓縮前預(yù)覽：</h3>
<img src="" id="preview"/>
<div id="yulan1"></div>
<!--所選文件壓縮后預(yù)覽-->
<h3>壓縮后預(yù)覽：</h3>
<img src="" id="nextview"/>
<div id="yulan"></div>
</form>
</body>
</html>
Js:
$(function(){
var _upFile=document.getElementById("upFile");
_upFile.addEventListener("change",function(){
if (_upFile.files.length === 0) {
alert("請(qǐng)選擇圖片");
return; }
for(var i=0;i<_upFile.files.length;i++){
var oFile = _upFile.files[i];
if(!new RegExp("(jpg|jpeg|png)+","gi").test(oFile.type)){
alert("照片上傳：文件類型必須是JPG、JPEG、PNG");
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var base64Img= e.target.result;
//壓縮前預(yù)覽
//$("#preview").attr("src",base64Img);
var str1 = '<img src="'+base64Img+'">';
$('#yulan1').append(str1);
//--執(zhí)行resize。
var _ir=ImageResizer({
resizeMode:"auto"
,dataSource:base64Img
,dataSourceType:"base64"
,maxWidth:1200 //允許的最大寬度
,maxHeight:600 //允許的最大高度。
,onTmpImgGenerate:function(img){
}
,success:function(resizeImgBase64,canvas){
//壓縮后預(yù)覽
//$("#nextview").attr("src",resizeImgBase64);
var str = '<img src="'+resizeImgBase64+'">';
$('#yulan').append(str);
//賦值到隱藏域傳給后臺(tái)
$('#imgOne').val($('#imgOne').val()+';'+resizeImgBase64.substr(22));
}
,debug:true
});
};
reader.readAsDataURL(oFile);
}
},false);
$('#upTo').on('click',function(){
if (_upFile.files.length === 0) {
alert("請(qǐng)選擇圖片");
return; }
$.ajax({
url:'server.php',
type:'POST',
dataType:'json',
data:{
imgOne:$('#imgOne').val()
},
success:function(data){
alert(data.msg);
}
});
});
});
php處理：
<?php
$img=trim($_POST['imgOne'],';');
$imgarr=explode(';', $img);
foreach($imgarr as $k=>$v){
//解碼
$tmp = base64_decode($v);
//寫文件
$filename=time().$k.'.jpg';
$path='./upload/';
file_put_contents($path.$filename, $tmp);
}
$res['msg']='上傳成功！';
echo json_encode($res);
該方法實(shí)現(xiàn)了PC端文件多選，在手機(jī)端可以多次選擇上傳多張圖片的效果，現(xiàn)在已經(jīng)理解的程序員可以嘗試一下了，如果還存在不理解的地方，可以留言討論。
s="MsoNormal"> ...
燚軒科技 ·
09月18日
· 域名備案
s="MsoNormal"> ...
燚軒科技 ·
09月18日
· 域名申請(qǐng)
亮度蒙版是影調(diào)調(diào)整的基石。它提供了一個(gè)簡(jiǎn)便的方法來選取圖...
燚軒科技 ·
11月15日
· 質(zhì)感效果/PS通道
s="p"> <span...
燚軒科技 ·
11月16日
· Alt標(biāo)簽/網(wǎng)站優(yōu)化
目前大家經(jīng)常會(huì)遇到摳圖的問題，最多的就是摳人體、頭發(fā)，摳...
燚軒科技 ·
10月31日
· 摳圖/ps技巧
請(qǐng)掃二維碼聯(lián)系客服
854221200@qq.com
185-3825-9583
QQ客服
首頁
方案
資訊
知庫(kù)
