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>
这样基本把横着的图片旋转后就可以了。