移動端h5拍照壓縮即時上傳後臺並預覽

項目經理讓迭代一個功能，實時預覽並上傳到後臺的功能，聽到這立馬想起了幾個第三方插件去實現，mui  和api cloude萬萬沒想到的是這個app前面使用ios 和安卓原生寫的，而後mui和api cloud裏面都要配置文件，不能嵌入到app中，因而乎開始個人查詢h5官方api之路。好在皇天不負有心人，終於讓我弄出來了。

大體思路是這樣的，首先用h5的input file 在拍照時或者選擇手機相冊後把得到的圖片壓縮成base64位（這樣提升上傳速度，否則會上傳好久），而後調用接口傳到後臺，再從後臺吧上傳的圖片拿下來顯示到預覽區就能夠了。話很少說上代碼：

html:

<div class="container">
<!--頭像認證開始-->
<div class="top">
<div class="topUp">頭像認證</div>
<div class="topDown">
<div class="left">
<div class="pics">
<img src="../images/example2.png" id="carImg"/>
</div>
</div>
<div class="right">
<div class="pics" style="float: right;"><img src="../images/example2.png" id="zmImg"/></div>
</div>
</div>
<div class="topUp">
<div class="left">車身照</div>
<div class="right">手持身份證拍照</div>
</div>
</div>
<!--頭像認證結束-->
</div>
<!--拍照或者選擇相冊彈窗開始-->
<!--正面照開始-->
<div class="file" id="id1">
<div class="photograph">
<a href="javascript:;">
<form method="post" id="businessUpload1" enctype="multipart/form-data">
<input type="file" name="file" accept="image/gif,image/jpeg,image/jpg" capture="camera" id="txCramePic">相機拍照
<!--<input type="hidden" name="account" id="business-account1">
<input type="hidden" name="imgType" id="business-imgType1">-->
</form>
</a>
</div>
<div class="photo">
<a href="javascript:;">
<form method="post" id="businessUpload2" enctype="multipart/form-data">
<input type="file" name="file" accept="image/jpeg,image/jpg" id="txPic">選擇相冊
</form>
</a>
</div>
<button clsss="gb">取消</button>
</div>
<!--正面照結束-->

<!--身份證正面照開始-->
<div class="file" id="id2">
<div class="photograph">
<a href="javascript:;">
<form method="post" id="businessUpload3" enctype="multipart/form-data">
<input type="file" name="file" accept="image/gif,image/jpeg,image/jpg" capture="camera" id="sfzmCramePic">相機拍照
</form>
</a>
</div>
<div class="photo">
<a href="javascript:;">
<form method="post" id="businessUpload4" enctype="multipart/form-data">
<input type="file" name="file" accept="image/gif,image/jpeg,image/jpg" id="sfzmPic">選擇相冊
</form>
</a>
</div>
<button class="gb">取消</button>
</div>
<!--身份證正面照結束-->
<button class="gb">取消</button>
</div>

js:

var allowTypes = ['image/jpg', 'image/jpeg'];
// 10MB
var maxSize = 10 * 1024 * 1024;
var base64;
// 圖片最大寬度
var maxWidth = 640;
///////////這裏開始優化///////////

// 正面照開始

var zhengmianzhao;
$("#zmImg").on('touchend',function () {
$('#id1').show();
// 選擇相機開始
// var faceUrl= 'faceUrl';
$('#txCramePic').on('change',function(event){
if(event==null)
return;
var files = event.target.files[0];
var file = files;
var fileName = files.name;
var reader = new FileReader();

// 若是類型不在容許的類型範圍內
reader.onload = function (e) {

var img = new Image();
img.src = e.target.result;
img.onload = function(){
// 不要超出最大寬度
var w = Math.min(maxWidth, img.width);
// 高度按比例計算
var h = img.height * (w / img.width);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 設置 canvas 的寬度和高度
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
base64 = canvas.toDataURL('image/jpeg');
//console.log(base64);
base64 = base64.substring(base64.indexOf("base64,")+7,base64.length-1);
$.ajax({
url :"",
beforeSend:function(){
$("#zmImg").attr("src","../images/loading.gif");
$('#id1').hide();
},
data:{
'account':account,
'imgType':'faceUrl',
'fileBase64':base64,
'fileName':fileName

},
type : 'post',
dataType : 'json',
success : function(data) {

$("#zmImg")[0].src = data.data.imgUrl;
window.zhengmianzhao = data.data.imgUrl;
},
error : function(data) {
alert("對不起，請從新上傳");
$("#zmImg").attr("src","../images/example2.png");
}
});

};
//
};
reader.readAsDataURL(file);
});
// 選擇相機結束
// 選擇相冊開始
$('#txPic').on('change',function(){
if(event==null)
return;
// 獲取單張要上傳的那個圖片
var files = event.target.files[0];
var file = files;

var fileName = files.name;
// h5上傳自定義方法
var reader = new FileReader();

// 若是類型不在容許的類型範圍內
reader.onload = function (e) {
var img = new Image();
img.src = e.target.result;
img.onload = function(){
// 不要超出最大寬度
var w = Math.min(maxWidth, img.width);
// 高度按比例計算
var h = img.height * (w / img.width);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 設置 canvas 的寬度和高度
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
base64 = canvas.toDataURL('image/jpeg');
//console.log(base64);
base64 = base64.substring(base64.indexOf("base64,")+7,base64.length-1);
$.ajax({
url :"",
beforeSend:function(){
$("#zmImg").attr("src","../images/loading.gif");
$('#id1').hide();
},
data:{
'account':account,
'imgType':'faceUrl',
'fileBase64':base64,
'fileName':fileName

},
type : 'post',
dataType : 'json',
success : function(data) {

$("#zmImg")[0].src = data.data.imgUrl;
window.zhengmianzhao = data.data.imgUrl;
},
error : function(data) {
alert("對不起，請從新上傳");
$("#zmImg").attr("src","../images/example2.png");
}
});

};
//
};
reader.readAsDataURL(file);
});
// 選擇相冊結束
});
//正面照結束

以上代碼僅供參考，在這個程序員苦逼的年代裏 咱們須要抱團取暖