利用exif.js解决ios手机上传竖拍照片旋转90度问题

偏执的太偏执、 2021-07-04 11:05 443阅读 0赞

`html5+canvas`进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；`Android`手机没这个问题。

因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的`ios`照片进行角度旋转修正。

利用`exif.js`读取照片的拍摄信息，详见 http://code.ciaoca.com/javascript/exif-js/

这里主要用到`Orientation`属性。

`Orientation`属性说明如下：

<table> 
 <thead> 
  <tr> 
   <th>旋转角度</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0°</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>顺时针90°</td> 
   <td>6</td> 
  </tr> 
  <tr> 
   <td>逆时针90°</td> 
   <td>8</td> 
  </tr> 
  <tr> 
   <td>180°</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

下面就直接上代码了。

主要有`html5`页面和一个js，示例功能包含了图片压缩和旋转。

自己写的是`uploadImage.js`。

html5测试页面如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title>图片上传</title>
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/exif.js"></script>
        <script type="text/javascript" src="js/uploadImage.js"></script>
        <script type="text/javascript"> $("document").ready(function() { $("#uploadImage").change(function() { selectFileImage(this); }); }); </script>
    </head>
    <body>
    <div style="height: 50px; line-height: 50px; text-align: center; border-bottom: 1px solid #171E28;">
        上传图片:
        <input type="file" accept="image/*" id="uploadImage" capture="camera"/>
    </div>
    
    <div style="margin-top: 10px;">
        <img alt="preview" src="" id="myImage" width="100%" height="80%"/>
    </div>
    </body>
    </html>

uploadImage.js如下：

function selectFileImage(fileObj) { 
        var file = fileObj.files['0'];
        //图片方向角
        var Orientation = null;
        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);
        }
    }
    
    //对图片旋转处理
    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;
        }
    }

## 如图: ##

![在这里插入图片描述][20200813114047844.jpg]

[20200813114047844.jpg]: /images/20210704/48f8fb67eb83493599cd63675413f39c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，443人围观）

还没有评论，来说两句吧...

相关阅读

相关矩阵顺时针旋转90度

题目矩阵顺时针旋转90度解答 public class TransFerJuzhen { // 规律：新坐

迷南。/ 2024年02月18日 20:24/ 0 赞/ 44 阅读

相关 uniapp解决上传图片旋转90度问题

import compressImage from '@/common/imageutil.js'（文章最后）; const device = uni.g

喜欢ヅ旅行/ 2023年06月30日 08:59/ 0 赞/ 25 阅读

相关 iOS手机竖着拍的照片被旋转了90°的原因以及解决方案

最近项目发现ios竖屏拍照上传图片文件时候，照片自动选中为横屏。经过测试发现，只有iOS手机竖着拍的照片才会出现这样的问题，而iOS手机横着拍的照片、Android手机拍

Dear 丶/ 2023年02月25日 07:25/ 0 赞/ 2 阅读

相关 android 控件方向旋转90度,android的videoview怎么旋转90度播放

android:layout\_width="match\_parent" android:layout\_height="match\_parent" android:o

约定不等于承诺〃/ 2022年10月17日 11:25/ 0 赞/ 453 阅读

相关 iOS开发- 相机(摄像头)获取到的图片自动旋转90度解决办法

今天写demo的时候发现, 如果把通过相机获取到的图片，直接进行操作, 比如裁剪, 缩放, 则会把原图片向又旋转90度。刚开始觉得莫名其妙, 不知所措。后来百度了一下，找

淩亂°似流年/ 2022年08月12日 11:28/ 0 赞/ 223 阅读

相关上传图片的时候，ios手机的图片会旋转90°

1、问题：在html5中利用canvas对上传图片压缩的时候，ios手机竖着拍照时，图片会旋转90°，其他情况正常。 2、解决方法：获取拍照角度，对Ios竖着拍的照片进行角度

客官°小女子只卖身不卖艺/ 2022年06月03日 00:17/ 0 赞/ 328 阅读

相关 ios手机竖屏拍照旋转问题

ios拍照上传经常会出现上传的图片被旋转了，不是我们想要的角度，可以对齐进行调整 <!DOCTYPE html> <html> <head>

系统管理员/ 2022年04月12日 11:47/ 0 赞/ 393 阅读

相关 iOS开发- 相机摄像头获取到的图片自动旋转90度解决办法

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！[https://blog.csdn.net/jiangjuns

╰+哭是因爲堅強的太久メ/ 2022年03月17日 09:48/ 0 赞/ 508 阅读

相关解决手机拍照，照片在PC浏览器旋转

//$imgSrc为图片base64流 if (preg_match('/^(data:\simage\/(\w+);base64,)/',$imgSrc,$resul

古城微笑少年丶/ 2021年12月16日 13:47/ 0 赞/ 289 阅读

相关利用exif.js解决ios手机上传竖拍照片旋转90度问题

`html5+canvas`进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；`Android`手机没这个问题。因此解决这个问题的思

偏执的太偏执、/ 2021年07月04日 11:05/ 0 赞/ 444 阅读