移动端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);
});
// 选择相册结束
});
//正面照结束

以上代码仅供参考，在这个程序员苦逼的年代里 我们需要抱团取暖