解决web移动端手机上传图片会变横的问题

手机APP/开发
426
0
0
2022-08-04

解决web移动端手机上传图片会变横的问题

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>

这样基本把横着的图片旋转后就可以了。