導(dǎo)語
本篇文章使用H5實(shí)現(xiàn)圖片預(yù)覽，壓縮上傳的功能悦屏，主要用到了以下知識點(diǎn)。
- 使用<input type="file" accept="image/*" >獲取上傳的圖片文件
- 使用H5 FileReader 上傳。通FileReader API讀取本地的圖片文件耍鬓，然后將文件轉(zhuǎn)換成base64編碼的字符串，即Data URL流妻。
- 使用canvas的toDataURL方法牲蜀，設(shè)置圖片質(zhì)量，來壓縮圖片
- 使用exif.js來解決ios手機(jī)上傳豎拍照片會逆時(shí)針旋轉(zhuǎn)90度绅这，橫拍照片無此問題（Android手機(jī)沒有這個(gè)問題）
開始實(shí)現(xiàn)
1涣达、HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="format-detection" content="telephone=no"> <!-- 解決瀏覽器自動顯示手機(jī)號問題 -->
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no" />
<title>H5圖片上傳</title>
</head>
<body>
<div class="loadFP">
<div>
<img src="~/img/cameraPic.png" alt="" id="ImgFront">
</div>
<form id="uploadFrontFrom" enctype="multipart/from-data">
<input type="file" accept="image/*" id="uploadFrontInput">
</form>
<div >點(diǎn)擊上傳身份證正面</div>
</div>
<div class="loadBP">
<div>
<img src="~/img/cameraPic.png" alt="" id="ImgBack">
</div>
<form id="uploadBackFrom" enctype="multipart/from-data">
<input type="file" accept="image/*" id="uploadBKInput">
</form>
<div >點(diǎn)擊上傳身份證反面</div>
</div>
<div class="Footer">
<input type="button" value="提交" id="loadImg" disabled="disabled">
</div>
<script src="~/scripts/jquery-1.8.2.min.js"></script>
<script src="~/scripts/exif.js"></script>
<script src="~/scripts/uploadPic.js"></script>
</body>
</html>
2、JS代碼實(shí)現(xiàn)
var isFront = false;
var frontUri = "";
var bkUri = "";
//圖片方向角
var Orientation = null;
$("#uploadBKInput").on("change", function () {
var file = this.files[0];
isFront = false;
fileReader(file, isFront);
})
$("#uploadFrontInput").on("change", function () {
var file = this.files[0];
isFront = true;
fileReader(file, isFront);
})
var uploadMaxSize = 5 * 1024 * 1024;
var imgSize = 3 * 1024 * 1024;
function fileReader(file, isFront) {
if (typeof FileReader == "undefined") {
return false;
}
if (file == undefined) { return; }
if (file.size == 0) { return; }
if (file.size > uploadMaxSize) {
console.log( "您上傳的圖片大于5M证薇，請重新上傳");
return;
}
if (!/(jpg|jpeg|png|bmp|JPG|PNG|BMP)$/.test(file.type)) { return false; }
//獲取照片方向角屬性度苔，用戶旋轉(zhuǎn)控制
EXIF.getData(file, function () {
EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, "Orientation");
})
var oReader = new FileReader();
oReader.onload = function (e) {
var img = new Image();
img.src = e.target.result;
img.onload = function () {
var degree = 0, drawWidth, drawHeight, width, height;
drawWidth = this.width;
drawHeight = this.height;
//以下改變一下圖片大小
var maxSide = Math.max(drawWidth, drawHeight);
if (maxSide > 1024) {
var minSide = Math.min(drawWidth, drawHeight);
minSide = minSide / maxSide * 1024;
maxSide = 1024;
if (drawWidth > drawHeight) {
drawWidth = maxSide;
drawHeight = minSide;
} else {
drawWidth = minSide;
drawHeight = maxSide;
}
}
var canvas = document.createElement('canvas');
canvas.width = width = drawWidth;
canvas.height = height = drawHeight;
var context = canvas.getContext('2d');
//判斷圖片方向，重置canvas大小浑度，確定旋轉(zhuǎn)角度寇窑，iphone默認(rèn)的是home鍵在右方的橫屏拍攝方式
if (Orientation != "" && Orientation != 1 && Orientation != undefined) {
switch (Orientation) {
//iphone橫屏拍攝，此時(shí)home鍵在左側(cè)
case 3:
degree = 180;
drawWidth = -width;
drawHeight = -height;
break;
//iphone豎屏拍攝箩张，此時(shí)home鍵在下方(正常拿手機(jī)的方向)
case 6:
canvas.width = height;
canvas.height = width;
degree = 90;
drawWidth = width;
drawHeight = -height;
break;
//iphone豎屏拍攝疗认，此時(shí)home鍵在上方
case 8:
canvas.width = height;
canvas.height = width;
degree = 270;
drawWidth = -width;
drawHeight = height;
break;
}
}
//使用canvas旋轉(zhuǎn)校正
context.rotate(degree * Math.PI / 180);
context.drawImage(img, 0, 0, drawWidth, drawHeight);
// 壓縮0.5就是壓縮百分之50
var data = canvas.toDataURL('image/jpeg', 0.5);
if (file.size > imgSize) {
data = canvas.toDataURL('image/jpeg', 0.7);
}
canvas = context = null;
if (!isFront) {
bkUri = data;
$("#ImgBack").attr("src", data);
} else {
frontUri = data;
$("#ImgFront").attr("src", data);
}
if (frontUri != "" && bkUri != "") {
$("#loadImg").removeClass("disabled");
}
}
};
oReader.readAsDataURL(file);
}
$("#loadImg").click(function () {
if (frontUri == "" || bkUri == "") { return; }
$.ajax({
url: "uploadImg",
data: { "ImgB": + bkUri.split(",")[1] ,"ImgA": + frontUri.split(",")[1] },
dataType: "json",
type: "post",
success: function (json) {
if (json.Code == "true") {
alert("圖片上傳成功");
} else {
alert("上傳失敗，請重新上傳");
}
},
error: function () {
alert("出錯(cuò)了!");
}
})
})
