您的位置：首页 > 移动开发 > IOS开发

利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题

2016-10-10 16:47 645 查看

html5+canvas进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。

因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。

利用exif.js读取照片的拍摄信息，详见 http://code.ciaoca.com/javascript/exif-js/
这里主要

用到Orientation属性。

Orientation

属性说明如下：[/code]

旋转角度	参数
0°	1
顺时针90°	6
逆时针90°	8
180°	3

下面就直接上代码了。

主要有html5页面和一个js，示例功能包含了图片压缩和旋转。

自己写的是uploadImage.js。

html5测试页面如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>图片上传</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/uploadPicture/uploadImage.js" ></script>
<script type="text/javascript" src="js/exif.js" ></script>
<script>

</script>
</head>
<body>
<div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">
上传图片:
<input type="file" accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);" />
</div>
<div style="margin-top: 10px;">
<img alt="preview" src="" id="myImage"/>
</div>
</body>
</html>
uploadImage.js如下：
[javascript] view plain copy
function selectFileImage(fileObj) {
var file = fileObj.files['0'];
//图片方向角 added by lzk
var Orientation = null;

if (file) {
console.log("正在上传,请稍后...");
var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
if (!rFilter.test(file.type)) {
//showMyTips("请选择jpeg、png格式的图片", false);
return;
}
// 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 oReader = new FileReader();
oReader.onload = function(e) {
//var blob = URL.createObjectURL(file);
//_compress(blob, file, basePath);
var image = new Image();
image.src = e.target.result;
image.onload = function() {
var expectWidth = this.naturalWidth;
var expectHeight = this.naturalHeight;

if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
expectWidth = 800;
expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
} else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
expectHeight = 1200;
expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
}
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = expectWidth;
canvas.height = expectHeight;
ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
var base64 = null;
//修复ios
if (navigator.userAgent.match(/iphone/i)) {
console.log('iphone');
//alert(expectWidth + ',' + expectHeight);
//如果方向角不为1，都需要进行旋转 added by lzk
if(Orientation != "" && Orientation != 1){
alert('旋转处理');
switch(Orientation){
case 6://需要顺时针（向左）90度旋转
alert('需要顺时针（向左）90度旋转');
rotateImg(this,'left',canvas);
break;
case 8://需要逆时针（向右）90度旋转
alert('需要顺时针（向右）90度旋转');
rotateImg(this,'right',canvas);
break;
case 3://需要180度旋转
alert('需要180度旋转');
rotateImg(this,'right',canvas);//转两次
rotateImg(this,'right',canvas);
break;
}
}

/*var mpImg = new MegaPixImage(image);
mpImg.render(canvas, {
maxWidth: 800,
maxHeight: 1200,
quality: 0.8,
orientation: 8
});*/
base64 = canvas.toDataURL("image/jpeg", 0.8);
}else if (navigator.userAgent.match(/Android/i)) {// 修复android
var encoder = new JPEGEncoder();
base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);
}else{
//alert(Orientation);
if(Orientation != "" && Orientation != 1){
//alert('旋转处理');
switch(Orientation){
case 6://需要顺时针（向左）90度旋转
alert('需要顺时针（向左）90度旋转');
rotateImg(this,'left',canvas);
break;
case 8://需要逆时针（向右）90度旋转
alert('需要顺时针（向右）90度旋转');
rotateImg(this,'right',canvas);
break;
case 3://需要180度旋转
alert('需要180度旋转');
rotateImg(this,'right',canvas);//转两次
rotateImg(this,'right',canvas);
break;
}
}

base64 = canvas.toDataURL("image/jpeg", 0.8);
}
//uploadImage(base64);
$("#myImage").attr("src", base64);
};
};
oReader.readAsDataURL(file);
}
}

//对图片旋转处理 added by lzk
function rotateImg(img, direction,canvas) {
//alert(img);
//最小与最大旋转方向，图片旋转4次后回到原方向
var min_step = 0;
var max_step = 3;
//var img = document.getElementById(pid);
if (img == null)return;
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
var height = img.height;
var width = img.width;
//var step = img.getAttribute('step');
var step = 2;
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
//旋转到原位置，即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
//img.setAttribute('step', step);
/*var canvas = document.getElementById('pic_' + pid);
if (canvas == null) {
img.style.display = 'none';
canvas = document.createElement('canvas');
canvas.setAttribute('id', 'pic_' + pid);
img.parentNode.appendChild(canvas);
}  */
//旋转角度以弧度值为参数
var degree = step * 90 * Math.PI / 180;
var ctx = canvas.getContext('2d');
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
}

再看下Exif.js官网：
http://code.ciaoca.com/javascript/exif-js/
文档目录

使用方法

API 方法

EXIF 标识

相关信息

使用方法

载入 JavaScript 文件

<script src="exif.js"></script>

获取 EXIF 数据

EXIF.getData(document.getElementById('imgElement'), function(){
EXIF.getAllTags(this);
EXIF.getTag(this, 'Orientation');
});

API 方法


名称	说明
EXIF.getData(img, callback)	获取图像的数据能兼容尚未支持提供 EXIF 数据的浏览器获取到元数据。
EXIF.getTag(img, tag)	获取图像的某个数据
EXIF.getAllTags(img)	获取图像的全部数据，值以对象的方式返回
EXIF.pretty(img)	获取图像的全部数据，值以字符串的方式返回

EXIF 标识


名称	说明
ExifVersion	Exif 版本
FlashPixVersion	FlashPix 版本
ColorSpace	色域、色彩空间
PixelXDimension	图像的有效宽度
PixelYDimension	图像的有效高度
ComponentsConfiguration	图像构造
CompressedBitsPerPixel	压缩时每像素色彩位
MakerNote	制造商设置的信息
UserComment	用户评论
RelatedSoundFile	关联的声音文件
DateTimeOriginal	创建时间
DateTimeDigitized	数字化创建时间
SubsecTime	日期时间（秒）
SubsecTimeOriginal	原始日期时间（秒）
SubsecTimeDigitized	原始日期时间数字化（秒）
ExposureTime	曝光时间
FNumber	光圈值
ExposureProgram	曝光程序
SpectralSensitivity	光谱灵敏度
ISOSpeedRatings	感光度
OECF	光电转换功能
ShutterSpeedValue	快门速度
ApertureValue	镜头光圈
BrightnessValue	亮度
ExposureBiasValue	曝光补偿
MaxApertureValue	最大光圈
SubjectDistance	物距
MeteringMode	测光方式
Lightsource	光源
Flash	闪光灯
SubjectArea	主体区域
FocalLength	焦距
FlashEnergy	闪光灯强度
SpatialFrequencyResponse	空间频率反应
FocalPlaneXResolution	焦距平面X轴解析度
FocalPlaneYResolution	焦距平面Y轴解析度
FocalPlaneResolutionUnit	焦距平面解析度单位
SubjectLocation	主体位置
ExposureIndex	曝光指数
SensingMethod	图像传感器类型
FileSource	源文件
SceneType	场景类型（1 == 直接拍摄）
CFAPattern	CFA 模式
CustomRendered	自定义图像处理
ExposureMode	曝光模式
WhiteBalance	白平衡（1 == 自动，2 == 手动）
DigitalZoomRation	数字变焦
FocalLengthIn35mmFilm	35毫米胶片焦距
SceneCaptureType	场景拍摄类型
GainControl	场景控制
Contrast	对比度
Saturation	饱和度
Sharpness	锐度
DeviceSettingDescription	设备设定描述
SubjectDistanceRange	主体距离范围
InteroperabilityIFDPointer
ImageUniqueID	图像唯一ID

Tiff 相关


名称	说明
ImageWidth	图像宽度
ImageHeight	图像高度
BitsPerSample	比特采样率
Compression	压缩方法
PhotometricInterpretation	像素合成
Orientation	拍摄方向
SamplesPerPixel	像素数
PlanarConfiguration	数据排列
YCbCrSubSampling	色相抽样比率
YCbCrPositioning	色相配置
XResolution	X方向分辨率
YResolution	Y方向分辨率
ResolutionUnit	分辨率单位
StripOffsets	图像资料位置
RowsPerStrip	每带行数
StripByteCounts	每压缩带比特数
JPEGInterchangeFormat	JPEG SOI 偏移量
JPEGInterchangeFormatLength	JPEG 比特数
TransferFunction	转移功能
WhitePoint	白点色度
PrimaryChromaticities	主要色度
YCbCrCoefficients	颜色空间转换矩阵系数
ReferenceBlackWhite	黑白参照值
DateTime	日期和时间
ImageDescription	图像描述、来源
Make	生产者
Model	型号
Software	软件
Artist	作者
Copyright	版权信息

GPS 相关


名称	说明
GPSVersionID	GPS 版本
GPSLatitudeRef	南北纬
GPSLatitude	纬度
GPSLongitudeRef	东西经
GPSLongitude	经度
GPSAltitudeRef	海拔参照值
GPSAltitude	海拔
GPSTimeStamp	GPS 时间戳
GPSSatellites	测量的卫星
GPSStatus	接收器状态
GPSMeasureMode	测量模式
GPSDOP	测量精度
GPSSpeedRef	速度单位
GPSSpeed	GPS 接收器速度
GPSTrackRef	移动方位参照
GPSTrack	移动方位
GPSImgDirectionRef	图像方位参照
GPSImgDirection	图像方位
GPSMapDatum	地理测量资料
GPSDestLatitudeRef	目标纬度参照
GPSDestLatitude	目标纬度
GPSDestLongitudeRef	目标经度参照
GPSDestLongitude	目标经度
GPSDestBearingRef	目标方位参照
GPSDestBearing	目标方位
GPSDestDistanceRef	目标距离参照
GPSDestDistance	目标距离
GPSProcessingMethod	GPS 处理方法名
GPSAreaInformation	GPS 区功能变数名
GPSDateStamp	GPS 日期
GPSDifferential	GPS 修正

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航