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

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

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

这里主要用到Orientation属性。

Orientation属性说明如下：

旋转角度 参数
0° 1
顺时针90° 6
逆时针90° 8
180° 3

下面就直接上代码了。

主要有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-1.8.3.js"></script>

    <script type="text/javascript" src="js/uploadPicture/uploadImage.js" ></script>

        <script type="text/javascript" src="js/exif.js" ></script>

    <script>  

    </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" onchange="selectFileImage(this);" />    //调取手机摄像头的属性

        </div>

        <div style="margin-top: 10px;">

            <img alt="preview" src="" id="myImage"/>

        </div>

</body>

</html>

uploadImage.js如下：

function selectFileImage(fileObj) {

    var file = fileObj.files['0'];

    //图片方向角 added by lzk

    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);

    }

}  

//对图片旋转处理 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;

        }

    }

以上是转载自：http://blog.csdn.net/linlzk/article/details/48652635

以下是自己在实际的项目开发中所用的方法：

$('#input_photo').on('change',function(){

    if(checkUA.isIOS){

        selectFileImage(this);

    }else{   //发现安卓用这个方法速度快得多。

        var fileval = this.value;

        if(!/\.(jpg|gif|jpeg|png|bmp)$/ig.test(fileval)){

            return false;

        }else{

            var url = window.URL.createObjectURL(file.files[0]);

            viewphoto.src = url;

        }

    }

}

function selectFileImage(fileObj) {

        var file = fileObj.files['0'];

        //图片方向角 added by lzk

        var Orientation = null;  

        if (file) {

            // console.log("正在上传,请稍后...");

            document.querySelector('#fixed').style.display = 'block';

            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 (checkUA.isIOS) {

                        // 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);

                    $("#viewphoto").attr("src", base64);

                    // console.log("上传完成,请稍后...");

                    document.querySelector('#fixed').style.display = 'none';

                };

            };

            oReader.readAsDataURL(file);

        }

    }

//对图片旋转处理 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;

        }

    }

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

  1. 解决ios手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

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

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

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

    原文:https://blog.csdn.net/linlzk/article/details/48652635/ html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针 ...

  4. java解决手机上传竖拍照片旋转90\180\270度问题

    <dependency> <groupId>com.drewnoakes</groupId> <artifactId>metadata-extracto ...

  5. JS 解决 IOS 中拍照图片预览旋转 90度 BUG

    上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...

  6. iOS 解决图片上传到服务器旋转90度的问题（图片倒置）

    //使用swift的朋友们可以,把这个所在的类的.h,在-Header-Swift.h中一用一下. - (UIImage *)fixOrientation:(UIImage *)aImage { if ...

  7. 移动端上传照片 预览+Draw on Canvas's Demo（解决 iOS 等设备照片旋转 90 度的 bug）

    背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览 需求二:然后绘制在canvas画布上 这里,我们先看一个demo(http://jsfiddle.net/q ...

  8. 微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题

    微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImage ...

  9. ios手机竖屏拍照图片旋转90°问题解决方法

    手机拍照会给图片添加一个Orientaion信息(即拍照方向),如下: 用ios手机拍照,系统会给图片加上一个方向的属性, ios相机默认的拍照方向是后摄Home键在右为正,前摄Home键在左为正. ...

随机推荐

  1. Form.action传值问题

    通过浏览器地址栏输入url并通过?传递参数请求资源时,?后面的参数叫做 "查询字符串",会触发后台Servlet的doGet(),因为通过浏览器地址栏直接访问的方式是GET方式. ...

  2. 常用 windows运行命令

    winver---------检查Windows版本 wmimgmt.msc----打开windows管理体系结构(WMI) wupdmgr--------windows更新程序 wscript--- ...

  3. HBase数据模型剖析

    出处:http://wuyudong.com/1987.html HBase 进行数据建模的方式和你熟悉的关系型数据库有些不同.关系型数据库围绕表.列和数据类型——数据的形态使用严格的规则.遵守这些严 ...

  4. Linux环境变量

    本文地址:http://www.cnblogs.com/archimedes/p/linux-envionment-variables.html,转载请注明源地址. 1.什么是环境变量 bash sh ...

  5. UVa 112 - Tree Summing（树的各路径求和,递归）

    题目来源:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=3&pa ...

  6. （转）Block的使用

    转:http://my.oschina.net/leejan97/blog/268536 本文翻译自苹果的文档,有删减,也有添加自己的理解部分. 如果有Block语法不懂的,可以参考fuckingbl ...

  7. BIEE从底层表结构向上更新

    影响BIEE查询结果的几个因素: 1.数据库表结构变化后,RPD如何处理? 更新物理层 增加.删除.修改表名. 添加字段:右键点击连接池,点击导入元数据.勾掉关键字,重新导入那张表. 删除字段:直接右 ...

  8. Effective Java 07 Avoid finallizers

    NOTE Never do anything time-critical in a finalizer. Never depend on a finalizer to update critical ...

  9. GDI学习之俄罗斯方块续

    当前方块对象 #region 定义砖块int[i,j,y,x] Tricks:i为那块砖,j为状态,y为列,x为行 private int[, , ,] Tricks = {{ { {,,,}, {, ...

  10. cxf构建webservice的两种方式

    一.简介 对于基于soap传输协议的webservice有两种开发模式,代码优先和契约优先的模式.代码优先的模式是通过编写服务器端的代码,使用代码生成wsdl:契约优先模式首先编写wsdl,再通过ws ...