jquery 手機端上傳圖片

標籤：cas   ret   min   方向   控制   ide   格式   nav   getc   

需要引入exif.js，矯正iphone拍攝圖片方向

function readImage(file) {
if (!/image\/\w+/.test(file.type)) {
alert(“上傳圖片格式不支援”);
return false;
}
var Orientation = null;
// var URL = URL || webkitURL;
//擷取照片方向角屬性，使用者旋轉控制
EXIF.getData(file, function () {
// alert(EXIF.pretty(this));
EXIF.getAllTags(this);
//alert(EXIF.getTag(this, ‘Orientation‘));
Orientation = EXIF.getTag(this, ‘Orientation‘);
//return;
});

var reader = new FileReader();
reader.onload = function (e) {
//if (navigator.userAgent.match(/iphone/i)) {
// // //如果方向角不為1，都需要進行旋轉 added by lzk
// if (Orientation != "" && Orientation != 1) {
getImgData(this.result, Orientation, function (data_url) {
//這裡可以使用校正後的圖片data了
$("#ID" ).attr("src", data_url);

});
// }
//}
}
reader.readAsDataURL(file);

}

 

// @param {string} img 圖片的base64
// @param {int} dir exif擷取的方向資訊
// @param {function} next 回調方法，返回校正方向後的base64
function getImgData(img, dir, next) {
var image = new Image();
image.onload = function () {
var degree = 0, drawWidth, drawHeight, width, height;
drawWidth = this.naturalWidth;
drawHeight = this.naturalHeight;
//以下改變一片大小
//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 maxSide = Math.max(drawWidth, drawHeight);
if (maxSide > 640) {
var minSide = Math.min(drawWidth, drawHeight);
minSide = minSide / maxSide * 640;
maxSide = 640;
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大小，確定旋轉角度，iphone預設的是home鍵在右方的橫屏拍攝方式
switch (dir) {

//iphone橫屏拍攝，此時home鍵在左側
case 3:
degree = 180;
drawWidth = -width;
drawHeight = -height;
break;
//iphone豎屏拍攝，此時home鍵在下方(正常拿手機的方向)
case 6:
canvas.width = height;
canvas.height = width;
degree = 90;
drawWidth = width;
drawHeight = -height;
break;
//iphone豎屏拍攝，此時home鍵在上方
case 8:
canvas.width = height;
canvas.height = width;
degree = 270;
drawWidth = -width;
drawHeight = height;
break;
}

//使用canvas旋轉校正
context.rotate(degree * Math.PI / 180);
context.drawImage(this, 0, 0, drawWidth, drawHeight);
//返回校正圖片
next(canvas.toDataURL("image/jpeg", 0.8));//壓縮率
}
image.src = img;
}

 

jquery 手機端上傳圖片