php ios上传图片旋转,上传图片解决ios端图片旋转90度问题

前一阵做的上传图片人脸识别的功能，测试人员告诉我说ios手机上传到后台，发现图片反转了90度，以前听说过这个问题，现在遇到了。为了能尽快解决这个问题(偷懒)，百度了一下，雾草，坑的不要不要的，在此呼吁一下，开发者别把半吊子代码发到网上，很容易误导人的有木有。

废话不多说=>

//此处省略HTML

var Orientation = null;

var canvasHead = '';

$('#fileBtn').on('change',function(){

var files = this.files[0];

var reader = new FileReader();

if(typeof FileReader == 'undefined'){

require('module/common/dialog').showToast('抱歉，您手机暂不支持');

return;

}else{

reader.readAsDataURL(files);

}

reader.onloadstart = function(){

require('module/common/dialog').showLoading('正在读取');

};

reader.onabort = function(){

require('module/common/dialog').hideLoading();

require('module/common/dialog').showToast('读取中断，请重试');

return false;

};

reader.onerror = function(){

require('module/common/dialog').hideLoading();

require('module/common/dialog').showToast('读取发生错误，请重试');

return false;

};

reader.onload = function(){

require('module/common/dialog').hideLoading();

require('module/common/dialog').showLoading('读取完成，玩命加载中');

if(reader.readyState == 2){

var fileStr = reader.result;

var image = new Image();

image.src = fileStr;

image.onload = function(){

$('#preHead').addClass('preHead');

var preHead_canvas = document.getElementById('preHead');

var preHead_ctx = preHead_canvas.getContext('2d');

$('.fileBtn').addClass('hide');

//获取Orientation

EXIF.getData(image, function() {

Orientation = EXIF.getTag(image, 'Orientation');

});

//如果没有Orientation 则为Android

if(!Orientation){

preHead_canvas.width = image.width;

preHead_canvas.height = image.height;

preHead_ctx.drawImage(image, 0, 0, image.width, image.height);

}

//如果有Orientation 则为IOS

else{

switch (Orientation) {

case 1:

preHead_canvas.width = image.width;

preHead_canvas.height = image.height;

preHead_ctx.drawImage(image, 0, 0, image.width, image.height);

break;

case 3:

preHead_canvas.width = image.width;

preHead_canvas.height = image.height;

preHead_ctx.rotate(Math.PI);

preHead_ctx.drawImage(image, -image.width, -image.height, image.width, image.height);

break;

case 6:

preHead_canvas.width = image.height;

preHead_canvas.height = image.width;

preHead_ctx.rotate(Math.PI / 2);

preHead_ctx.drawImage(image, 0, -image.height, image.width, image.height);

break;

case 8:

preHead_canvas.width = image.height;

preHead_canvas.height = image.width;

preHead_ctx.rotate(3 * Math.PI / 2);

preHead_ctx.drawImage(image, -image.width, 0, image.width, image.height);

break;

}

}

require('module/common/dialog').hideLoading();

canvasHead = preHead_canvas.toDataURL();

$('.cameraHead').attr('src',canvasHead);

$('#preHead').removeClass('hide');

};

}

}

});

代码比较简单，重点是根据Orientation的值来编写逻辑。