移動端手機拍照上傳的方向問題

iphone正確的手機拍照方式是橫屏的，用戶往往是豎屏拍照等於照相機反轉了９０度，出來的照片當然是反轉９０度，當你橫屏拍照上傳，圖片就是正確的，一張生成的圖片是無法辨別選擇方向的，只有在上傳前反轉角度才行，因為上傳到服務器以后，程序怎么可能知道這張照片要反轉９０度，那張要反轉１８０度，另一張要反轉２７０度呢，其他的不用反轉呢，正確的拍照姿勢很重要呀！

移動端上傳后顯示在img標簽的src中，有遇到圖片旋轉這種情況，你不能要求用戶如何拍照，解決辦法：

1. 如果你的后端上傳使用阿里OSS管理的圖片，那么，工具會提供相應的api進行圖片旋轉到正確的方向

2. 前端或者后端進行圖片參數處理，改變圖片方向

如果上傳后的圖片，點擊放大顯示在瀏覽器中，這時瀏覽器會默認將圖片顯示成正確的方向

<script src="js/exif.js"></script>
var file = document.querySelector('input[type=file]').files[0];//IE10以下不支持
EXIF.getData(file, function() {
       var Orientation = EXIF.getTag(this, 'Orientation');
       if(Orientation && Orientation != 1){//圖片角度不正確
              fileFun(Orientation,file);
       }else{
            //不需處理直接上傳
       }
   });
   
//base64格式圖片 轉為Blob  
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}
//圖片處理函數
function fileFun(Orientation,file){
    var reader = new FileReader();
    var image = new Image();
    reader.readAsDataURL(file);
    
    reader.onload = function (ev) {
            image.src = ev.target.result;
            image.onload = function () {
                var imgWidth = this.width,
                    imgHeight = this.height; //獲取圖片寬高
                var canvas=document.getElementById("myCanvas");
                var ctx = canvas.getContext('2d');
                canvas.width = imgWidth;
                canvas.height = imgHeight;
                if(Orientation && Orientation != 1){
                    switch(Orientation){
                        case 6:     // 旋轉90度
                            canvas.width = imgHeight;
                            canvas.height = imgWidth;
                            ctx.rotate(Math.PI / 2);
                            ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
                            break;
                        case 3:// 旋轉180度
                            ctx.rotate(Math.PI);
                            ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
                            break;
                        case 8:     // 旋轉-90度
                            canvas.width = imgHeight;
                            canvas.height = imgWidth;
                            ctx.rotate(3 * Math.PI / 2);
                            ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
                            break;
                    }
                }else{
                    ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
                }
                var dataurl=canvas.toDataURL("image/jpeg", 0.8);//canvase 轉為base64
                var blob = dataURLtoBlob(dataurl);//base64轉為blog
            }
        }

}

作者：只會切圖的前端 
原文：https://blog.csdn.net/qq_41786458/article/details/83621865