上传图片方向不对 php,如何解决IOS中html5上传图片方向问题？

这篇文章主要介绍了IOS中html5上传图片方向问题解决方法的相关资料,需要的朋友可以参考下

用html5编写图片裁切上传，在iphone手机上可能会遇到图片方向错误问题，在此把解决方法和大家分享一下，

用到了html5的 FileReader和Canvas，如果还没有接触的同学，先了解一下其方法。//此方法为file input元素的change事件

function change(){

var file = this.files[0];

var orientation;

//EXIF js 可以读取图片的元信息 https://github.com/exif-js/exif-js

EXIF.getData(file,function(){

orientation=EXIF.getTag(this,'Orientation');

});

var reader = new FileReader();

reader.onload = function(e) {

getImgData(this.result,orientation,function(data){

//这里可以使用校正后的图片data了

});

}

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.οnlοad=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 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",.8));

}

image.src=img;

}