利用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