码迷,mamicode.com
首页 > 移动开发 > 详细

jquery 手机端上传图片

时间:2017-11-14 19:34:55      阅读:254      评论:0      收藏:0      [点我收藏+]

标签: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 手机端上传图片

标签:cas   ret   min   方向   控制   ide   格式   nav   getc   

原文地址:http://www.cnblogs.com/NowBlocks/p/7833828.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!