解決移動端iOS下上傳圖片被旋轉問題。

zhunjiee 發布于2019-08-21 17:08 / 2880人閱讀

摘要：下上傳圖片被旋轉解決方法用既然是解決問題，那就簡單說一下，直接上代碼方式使用在上可以直接調用照相機拍照，豎拍出來的圖片都會變成橫圖思路獲取到照片拍攝的方向角，對非橫拍的照片使用的進行角度旋轉修正。

iOS下html上傳圖片被旋轉

解決方法用exif.js+canvas

既然是解決問題，那就簡單說一下，直接上代碼！

html方式使用在iOS上可以直接調用照相機拍照，豎拍出來的圖片都會變成橫圖！

思路：獲取到照片拍攝的方向角，對非橫拍的ios照片使用canvas的rotate進行角度旋轉修正。

頁面引入exif.js 網盤分享給你吧http://pan.baidu.com/s/1geNuzGf

利用exif.js讀取照片的拍攝信息，詳見 http://code.ciaoca.com/javasc...

這里主要用到Orientation屬性。

   EXIF.getData(_ImgFile,  function() {     //_ImgFile圖片數據
    var Orientation = EXIF.getTag(this, "Orientation");   
     return Orientation                   //Orientation返回的參數 1 、3 、6 、8
    });

Orientation 參數 1、3、6、8 對應的你需要旋轉的角度

1   0°
3   180°    
6   順時針90°
8   逆時針90°

ios拍出來照片信息里面Orientation 是6 順時針90°

         switch(Orientation){
                                case 6:     // 旋轉90度
                                    widthORheight=0;
                                    cvs.width = this.height * scale;
                                    cvs.height = this.width * scale;
                                    ctx.rotate(Math.PI / 2);
                                    // (0,-imgHeight) 從旋轉原理圖那里獲得的起始點
                                    ctx.drawImage(this, 0,-this.height * scale,  this.width * scale, this.height * scale  );
                                    break;
                                case 3:     // 旋轉180度
                                    ctx.rotate(Math.PI);
                                    ctx.drawImage(this, -this.width * scale, -this.height * scale,  this.width * scale, this.height * scale);
                                    break;
                                case 8:     // 旋轉-90度
                                    widthORheight=0;
                                    cvs.width = this.height * scale;
                                    cvs.height = this.width * scale;
                                    ctx.rotate(3 * Math.PI / 2);
                                    ctx.drawImage(this, - this.width * scale, 0,  this.width * scale, this.height * scale);
                                    break;

                            }

全部代碼

htlm：

css 隨意

        // 轉換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});
        }
        
    
    var imgBlobIndex=[];  //存放多張圖片的的容器。用于多張圖片上傳或者刪除多張圖片中某一張圖片，
        

     $("#showImg").change(function() {
        var listNunber=$("#fileList").find("img").length,
            Orientation = null,
            _this = $(this)[0],
            _leng = this.files.length,
            maxSize = 2500000,// 限制單張大小2.5M
            minSize=100000;   //壓縮臨界 1M
           
                for (var j = 0; j < _leng; j++) {
                    var _filelist = _this.files[j],
                        fileType = _filelist.type,
                        size = _filelist.size;     //獲取圖片的大小
                    if (size < maxSize) {        
                                                  //獲取圖片Orientation參數
                        EXIF.getData(_filelist, function() {
                            Orientation = EXIF.getTag(this, "Orientation");
                        });
                         
                        var fileReader = new FileReader();
                        fileReader.readAsDataURL(_filelist);
                        fileReader.onload = function (event) {
                            var result = event.target.result;   //返回的dataURL
                            var image = new Image();
                            image.src = result;
                            image.onload = function () {//創建一個image對象，給canvas繪制使用

                                var cvs = document.createElement("canvas");
                                var ctx = cvs.getContext("2d");
                                var scale = 1;          //預留壓縮比
                    
                                cvs.width = this.width * scale;
                                cvs.height = this.height * scale;//計算等比縮小后圖片寬高

                                if(Orientation && Orientation != 1){
                                    switch(Orientation){
                                        case 6:     // 旋轉90度
                                            
                                            cvs.width = this.height * scale;
                                            cvs.height = this.width * scale;
                                            ctx.rotate(Math.PI / 2);
                                            // (0,-imgHeight) 從旋轉原理圖那里獲得的起始點
                                            ctx.drawImage(this, 0,-this.height * scale,  this.width * scale, this.height * scale  );
                                            break;
                                        case 3:     // 旋轉180度
                                            ctx.rotate(Math.PI);
                                            ctx.drawImage(this, this.width * scale, -this.height * scale,  this.width * scale, this.height * scale);
                                            break;
                                        case 8:     // 旋轉-90度
                                        
                                            cvs.width = this.height * scale;
                                            cvs.height = this.width * scale;
                                            ctx.rotate(3 * Math.PI / 2);
                                            ctx.drawImage(this, - this.width * scale, 0,  this.width * scale, this.height * scale);
                                            break;

                                    }
                                }else{
                                    ctx.drawImage(this, 0, 0,  cvs.width, cvs.height);
                                }
                               /* ctx.drawImage(this, 0, 0, cvs.width, cvs.height);*/
                                if(size";  //創建預覽對象
                                imgid++;
                                i++;
                                $("#fileList").append(img);   //圖片預覽容器

                                
                                var imgdata=dataURLtoBlob(newImageData);  //  創建blob 用于上傳
                                imgBlobIndex.push(imgdata);                   //多張圖片時上傳用
                                                                
                            };
                        };
                    }else {    
                      alert("您照片大小超過2.5M了，請更換照片")
                    }
                }
           
      
    });

云服務器 GPU云服務器 H5移動端上傳圖片上傳圖片旋轉手機端上傳圖片安卓端上傳圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89162.html

移動端圖片上傳踩坑記錄（包括平移縮放旋轉裁切）

摘要：上傳圖片順時針旋轉度問題使用獲取圖片當前拍攝角度修正后展示裁切位置不正確或需要減去的差值問題描述當目標元素的上級元素中有使用時，用如上的方法都會導致計算錯誤，這一在常用框架，類庫中都存在。應該是和在實現上的差異造成了。 bug1.ios 上傳圖片順時針旋轉90度問題 solution1.使用exif.js獲取圖片當前拍攝角度修正后展示 http://www.mamicode.com...

Richard_Gao 2019-08-20 16:57 評論0 收藏0
用exfe.js和canvas解決移動端 IOS 拍照上傳圖片翻轉問題

前言記得16年的時候我初入前端差不多一年，公司做了一個webapp，有上傳頭像功能，當時這個項目不是我在負責，測試的時候發現蘋果用戶拍照上傳頭像會翻轉，當時幾個前端的同學捯飭了一下午也沒解決，結果問題轉到我這里，還有半個小時下班；當時也是一臉懵逼，首先想到的是，這怎么判斷它是否翻轉了呢？安卓沒問題啊，有些蘋果手機相冊里面的圖片也沒問題啊，js能有這種功能判斷嗎？上網查資料，果不其然，有！那就是e...

leap_frog 2019-08-23 12:38 評論0 收藏0
移動端上傳圖片翻轉的解決方案

摘要：后續過了幾天，公司購置了幾臺全新的測試機，測試同學將系統在一臺三星的機子上一測，又發現新問題了選擇完圖片進行本地預覽時，發現圖片翻轉了但上傳后再展示又是正常的。最近在處理移動端選擇圖片實時預覽并上傳時遇到一個問題：上傳前圖片預覽正常，但上傳到服務器上的圖片展示到頁面上時，有時會出現圖片翻轉的問題，一般是翻轉 90 度。后經一翻研究找到了問題所在，特在此記錄一下。問題描述接上面提到...

shinezejian 2019-08-19 17:15 評論0 收藏0
移動端H5圖片上傳的那些坑

摘要：上周做一個關于移動端圖片壓縮上傳的功能。利用，進行圖片的壓縮，得到圖片的的值上傳文件。上周做一個關于移動端圖片壓縮上傳的功能。期間踩了幾個坑，在此總結下。大體的思路是，部分API的兼容性請參照caniuse：利用FileReader,讀取blob對象,或者是file對象，將圖片轉化為data uri的形式。使用canvas,在頁面上新建一個畫布,利用canvas提供的API,...

Seay 2019-08-22 10:34 評論0 收藏0