exif
曾经填坑填了一天,最后终于在一个前辈的指导下把exif中的orientation获取到了,变横着显示貌似只有在苹果手机上才有的,我把我写的代码贴出来,原来想着用blob做上传的,可是经过测试,用blob做上传无法获取orientation,就改用FileReader做上传,利用base64编码格式给src,首先要引入exif.js,可以直接去github下载:
<script src="js/exif.js"></script> | |
<script> | |
$("input").change(function(){ | |
var file = this.files[0]; | |
var orientation; | |
if(window.FileReader){ | |
var fr=new FileReader(); | |
fr.onload=function(e){ | |
var dataURL=this.result;//获取到图片的base64编码 | |
var img = new Image(); | |
img.onload = function(){ | |
EXIF.getData(img,function(){ | |
orientation = EXIF.getTag(img,"Orientation");//获取图片的orientation | |
// console.log(orientation); | |
}); | |
switch(orientation) { | |
case 1: | |
break; | |
case 6: | |
console.log(orientation); | |
$("#addpic").css("transform","rotate(90deg)"); | |
$("#addpic").css("-webkit-transform","rotate(90deg)"); | |
break; | |
case 3: | |
$("#addpic").css("transform","rotate(180deg)"); | |
$("#addpic").css("-webkit-transform","rotate(180deg)"); | |
break; | |
case 8: | |
$("#addpic").css("transform","rotate(270deg)"); | |
$("#addpic").css("-webkit-transform","rotate(270deg)"); | |
break; | |
default: | |
break; | |
} | |
} | |
img.src=dataURL; | |
$("#addpic").attr("src", dataURL); | |
$(".add").hide(); | |
$(".addsteptwo").show(); | |
} | |
fr.readAsDataURL(file); | |
} | |
}); | |
</script> |
这样基本把横着的图片旋转后就可以了。