JS獲取照片拍攝的角度屬性問(wèn)題調(diào)整

位置：首頁(yè) / 新聞中心 / 知識(shí)教程

知識(shí)教程 Admin 2024-02-23 18:09:22 1129

今天處理一個(gè)人臉合成的項(xiàng)目，首先自拍人臉并上傳，其次調(diào)用百度人臉合成接口進(jìn)行合成，但是遇到一個(gè)問(wèn)題，部分手機(jī)上傳自拍時(shí)，人臉招照片自動(dòng)旋轉(zhuǎn)了90度。正常應(yīng)該是豎的。百度發(fā)現(xiàn)問(wèn)題是在微信里ios手機(jī)上傳豎拍照片會(huì)自動(dòng)旋轉(zhuǎn)90度，與拍攝時(shí)的角度不同，所以需要做如下處理：


1、使用EXIF.js可以獲取到照片的拍攝屬性：

API 方法

名稱說(shuō)明
EXIF.getData(img, callback)

獲取圖像的數(shù)據(jù)

能兼容尚未支持提供 EXIF 數(shù)據(jù)的瀏覽器獲取到元數(shù)據(jù)。

EXIF.getTag(img, tag)獲取圖像的某個(gè)數(shù)據(jù)
EXIF.getAllTags(img)獲取圖像的全部數(shù)據(jù)，值以對(duì)象的方式返回
EXIF.pretty(img)獲取圖像的全部數(shù)據(jù)，值以字符串的方式返回













 

//獲取照片方向角屬性，用戶旋轉(zhuǎn)控制 
            EXIF.getData(files, function() {
                //alert(EXIF.getTag(this, 'Orientation'));  
                Orientation = EXIF.getTag(this, 'Orientation'); 
//                return; 
            });

其中Orientation就是拍攝的角度信息；其他參數(shù)信息可以查看：http://code.ciaoca.com/javascript/exif-js/
注意：這里我的files是獲取的文件格式的圖片，files[0]獲取的。
Orientation屬性說(shuō)明如下:
旋轉(zhuǎn)角度參數(shù)
0°1
順時(shí)針90°6
逆時(shí)針90°8
180°3



 










2、判斷照片需要旋轉(zhuǎn)多少角度并使用canvas對(duì)其旋轉(zhuǎn)處理：
復(fù)制代碼
//修復(fù)ios 
                            if (navigator.userAgent.match(/iphone/i)) {
                                var img = new Image();
                                img.src = resImg.src;
                                img.onload = function(){
                                    var canvas=document.createElement("canvas");
                                    var ctx=canvas.getContext("2d");
                                    var imgWidth = canvas.width = this.width;    
                                    var imgHeight = canvas.height = this.height; 
                                    //如果方向角不為1，都需要進(jìn)行旋轉(zhuǎn) added by lzk 
                                    if(Orientation && Orientation != 1){
                                        switch(Orientation){
                                            case 6:     // 旋轉(zhuǎn)90度
                                                canvas.width = this.height;    
                                                canvas.height = this.width;    
                                                ctx.rotate(Math.PI / 2);
                                                // (0,-imgHeight) 從旋轉(zhuǎn)原理圖那里獲得的起始點(diǎn)
                                                ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
                                                break;
                                            case 3:     // 旋轉(zhuǎn)180度
                                                ctx.rotate(Math.PI);    
                                                ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
                                                break;
                                            case 8:     // 旋轉(zhuǎn)-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 base64code=canvas.toDataURL("image/png",1);
                                    $(resImg).attr("src",base64code);
                                    var $blob = baseToBlobImg(base64code);
                                    if($(_self).attr('id') == 'hiddenServerId'){
                                        chooseImgList[0].serverImg = $blob //接收blob
                                    
                                    }else{
                                        chooseImgList[1].serverImg = $blob //接收blob
                                    }
                                                                        
                                }
                                
                            }else{
                                //非蘋果手機(jī)壓縮后上傳
                                var base64code = resImg.src;
                                var $blob = baseToBlobImg(base64code);
                                if($(_self).attr('id') == 'hiddenServerId'){
                                    chooseImgList[0].serverImg = $blob //接收blob
                                
                                }else{
                                    chooseImgList[1].serverImg = $blob //接收blob
                                }
                            }
復(fù)制代碼
3、將處理后的圖片最后轉(zhuǎn)換成bold類型文件上傳：
復(fù)制代碼
/*將base64的圖片轉(zhuǎn)換為blod格式上傳*/
    function baseToBlobImg(base64code){
        var arr = base64code.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 obj = new Blob([u8arr], {type:mime});
    }  
復(fù)制代碼

以上就是“JS獲取照片拍攝的角度屬性問(wèn)題調(diào)整”的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注木子天禾科技其它相關(guān)文章！
                

                
以上就是“JS獲取照片拍攝的角度屬性問(wèn)題調(diào)整”的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注木子天禾科技其它相關(guān)文章！

            

            
            
        

    












  15934152105
  掃描微信