利用exif.js解決ios手機上傳豎拍照片旋轉90度問題

時間 2019-12-04

標籤利用 exif.js exif 解決 ios 手機上傳拍照旋轉問題欄目 JavaScript 简体版

原文原文鏈接

HTML5+canvas進行移動端手機照片上傳時，發現iOS手機上傳豎拍照片會逆時針旋轉90度，橫拍照片無此問題；Android手機沒這個問題。
所以解決這個問題的思路是：獲取到照片拍攝的方向角，對非橫拍的ios照片進行角度旋轉修正。
利用exif.js讀取照片的拍攝信息，詳見 http://code.ciaoca.com/JavaScript/exif-js/
這裏主要用到Orientation屬性。
Orientation屬性說明以下：
旋轉角度參數
0° 1
順時針90° 6
逆時針90° 8
180° 3javascript

下面就直接上代碼了。
主要有Html5頁面和一個js，示例功能包含了圖片壓縮和旋轉。
本身寫的是uploadImage.js。
html5測試頁面以下：
[javascript] view plain copy print?
<!DOCTYPE html>

圖片上傳

html

</script>

上傳圖片:

uploadImage.js以下：html5

function selectFileImage(fileObj) {
var file = fileObj.files['0'];
//圖片方向角 added by lzk
var Orientation = null;java

if (file) {  
    console.log("正在上傳,請稍後...");  
    var rFilter = /^(image\/jpeg|image\/png)$/i; // 檢查圖片格式  
    if (!rFilter.test(file.type)) {  
        //showMyTips("請選擇jpeg、png格式的圖片", false);  
        return;  
    }  
    // var URL = URL || webkitURL;  
    //獲取照片方向角屬性，用戶旋轉控制  
    EXIF.getData(file, function() {  
       // alert(EXIF.pretty(this));  
        EXIF.getAllTags(this);   
        //alert(EXIF.getTag(this, 'Orientation'));   
        Orientation = EXIF.getTag(this, 'Orientation');  
        //return;  
    });  
      
    var oReader = new FileReader();  
    oReader.onload = function(e) {  
        //var blob = URL.createObjectURL(file);  
        //_compress(blob, file, basePath);  
        var image = new Image();  
        image.src = e.target.result;  
        image.onload = function() {  
            var expectWidth = this.naturalWidth;  
            var expectHeight = this.naturalHeight;  
              
            if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {  
                expectWidth = 800;  
                expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;  
            } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {  
                expectHeight = 1200;  
                expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;  
            }  
            var canvas = document.createElement("canvas");  
            var ctx = canvas.getContext("2d");  
            canvas.width = expectWidth;  
            canvas.height = expectHeight;  
            ctx.drawImage(this, 0, 0, expectWidth, expectHeight);  
            var base64 = null;  
            //修復ios  
            if (navigator.userAgent.match(/iphone/i)) {  
                console.log('iphone');  
                //alert(expectWidth + ',' + expectHeight);  
                //若是方向角不爲1，都須要進行旋轉 added by lzk  
                if(Orientation != "" && Orientation != 1){  
                    alert('旋轉處理');  
                    switch(Orientation){  
                        case 6://須要順時針（向左）90度旋轉  
                            alert('須要順時針（向左）90度旋轉');  
                            rotateImg(this,'left',canvas);  
                            break;  
                        case 8://須要逆時針（向右）90度旋轉  
                            alert('須要順時針（向右）90度旋轉');  
                            rotateImg(this,'right',canvas);  
                            break;  
                        case 3://須要180度旋轉  
                            alert('須要180度旋轉');  
                            rotateImg(this,'right',canvas);//轉兩次  
                            rotateImg(this,'right',canvas);  
                            break;  
                    }         
                }  
                  
                /*var mpImg = new MegaPixImage(image); 
                mpImg.render(canvas, { 
                    maxWidth: 800, 
                    maxHeight: 1200, 
                    quality: 0.8, 
                    orientation: 8 
                });*/  
                base64 = canvas.toDataURL("image/jpeg", 0.8);  
            }else if (navigator.userAgent.match(/Android/i)) {// 修復android  
                var encoder = new JPEGEncoder();  
                base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);  
            }else{  
                //alert(Orientation);  
                if(Orientation != "" && Orientation != 1){  
                    //alert('旋轉處理');  
                    switch(Orientation){  
                        case 6://須要順時針（向左）90度旋轉  
                            alert('須要順時針（向左）90度旋轉');  
                            rotateImg(this,'left',canvas);  
                            break;  
                        case 8://須要逆時針（向右）90度旋轉  
                            alert('須要順時針（向右）90度旋轉');  
                            rotateImg(this,'right',canvas);  
                            break;  
                        case 3://須要180度旋轉  
                            alert('須要180度旋轉');  
                            rotateImg(this,'right',canvas);//轉兩次  
                            rotateImg(this,'right',canvas);  
                            break;  
                    }         
                }  
                  
                base64 = canvas.toDataURL("image/jpeg", 0.8);  
            }  
            //uploadImage(base64);  
            $("#myImage").attr("src", base64);  
        };  
    };  
    oReader.readAsDataURL(file);  
}

}android

//對圖片旋轉處理 added by lzk
function rotateImg(img, direction,canvas) {
//alert(img);
//最小與最大旋轉方向，圖片旋轉4次後回到原方向
var min_step = 0;
var max_step = 3;
//var img = document.getElementById(pid);
if (img == null)return;
//img的高度和寬度不能在img元素隱藏後獲取，不然會出錯
var height = img.height;
var width = img.width;
//var step = img.getAttribute('step');
var step = 2;
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
//旋轉到原位置，即超過最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
//img.setAttribute('step', step);
/var canvas = document.getElementById('pic_' + pid);
if (canvas == null) {
img.style.display = 'none';
canvas = document.createElement('canvas');
canvas.setAttribute('id', 'pic_' + pid);
img.parentNode.appendChild(canvas);
} /
//旋轉角度以弧度值爲參數
var degree = step * 90 * Math.PI / 180;
var ctx = canvas.getContext('2d');
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
}ios