解决ios横屏拍照图片自动旋转90度问题

<!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 src="https://cdn.bootcss.com/exif-js/2.3.0/exif.min.js"></script>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        #app,body,html {

            height: 100%

        }

        body {

            font-size: 12px;

            -webkit-tap-highlight-color: transparent;

            font-family: Helvetica, Arial, sans-serif;

        }

    </style>

</head>

<body>  

    <div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">

        上传图片:

        <input type="file" accept="image/png, image/jpeg, image/jpg" id="uploadImage" onchange="selectFileImage(this);" />

    </div>

    <img style="width:100%;" id="myImage"/ alt="preview" src="">  

    <!-- 微信SDK -->

    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

    <!-- 引入zepto -->

    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>

    <script>

        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;

                                }

                            }  

                        }base64 = canvas.toDataURL("image/jpeg",0.8)

                        document.getElementById('myImage').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);

            }    

            //旋转角度以弧度值为参数

            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;

            }

        }

    </script>

</body>  

</html>

解决ios横屏拍照图片自动旋转90度问题的更多相关文章

iOS开发- 相机(摄像头)获取到的图片自动旋转90度解决办法
http://blog.csdn.net/hitwhylz/article/details/39518463
关于android中调用系统拍照，返回图片是旋转90度
转载博客:http://blog.csdn.net/walker02/article/details/8211628 项目开发中遇到的一个问题,对于三星手机在做手机照片选择时出现图片显示不正常,研究后 ...
JS 解决 IOS 中拍照图片预览旋转 90度 BUG
上篇博文[ Js利用Canvas实现图片压缩 ]中做了图片压缩上传,但是在IOS真机测试的时候,发现图片预览的时候自动逆时针旋转了90度.对于这个bug,我完全不知道问题出在哪里,接下来就是面向百度编 ...
ios端浏览器拍照上传到服务器，图片被旋转90度 php 解决方案
1.可以通过前端进行解决,本案例通过后端解决的判断请求的浏览器的ua,如果是ios浏览器则进行90度旋转重点来了: 必须确保检测的图片是ios设备上传的完整图片,不要在前端压缩过的,因为压缩后的图 ...
EasyPusher手机直播编码推送之图像旋转90度后画面重复的问题
本文转自EasyDarwin开源团队开发Holo的博客:http://blog.csdn.net/holo_easydarwin 最初在做EasyPusher手机直播的时候遇到过一个问题:手机竖屏推送 ...
EasyPusher手机直播图像旋转90度后画面重复的问题
本文转自:http://blog.csdn.net/holo_easydarwin/article/details/51147379 最初在做EasyPusher手机直播的时候遇到过一个问题:手机竖屏 ...
移动端上传照片预览+Draw on Canvas's Demo（解决 iOS 等设备照片旋转 90 度的 bug）
背景: 本人的一个移动端H5项目,需求如下: 需求一:手机相册选取或拍摄照片后在页面上预览需求二:然后绘制在canvas画布上这里,我们先看一个demo(http://jsfiddle.net/q ...
解决ios手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

随机推荐

STM32Cube填坑,ST link 下载一次以后无法下载
ST link 下载一次以后无法下载, 原因是工程设置忘记设置Debug模式
Cocos2d-X网络编程(5) 使用Rapidjson解析数据
Json基础及28种c++解析库性能对比 JSON 概念和特点: JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON ...
js中dom选择器
document,getElementById("demo"); //通过id查询节点 . document.getElementsByTagName("div&q ...
python3 selenuim PC端使用chrome模拟手机进行H5自动化
情况说明:初次在做PC端使用chrome进行H5自动化测试时,以为和app端自动化一样使用click()就可以对按钮进行点击,找了好几天也没有找到解决方法,有些人说是工程问题,有些人是使用微信进行H5 ...
解一元二次方程的C++实现
一元二次方程的根的情况分为实根与虚根两种,代码如下 #include<iostream> #include<cmath> using namespace std; float ...
爬取网易云音乐评论！python 爬虫入门实战（六）selenium 入门！
说到爬虫,第一时间可能就会想到网易云音乐的评论.网易云音乐评论里藏了许多宝藏,那么让我们一起学习如何用 python 挖宝藏吧! 既然是宝藏,肯定是用要用钥匙加密的.打开 Chrome 分析 Head ...
[官网]关于EPEL
EPEL/zh-cn https://fedoraproject.org/wiki/EPEL/zh-cn Contents [hide] 1企业版 Linux 附加软件包(EPEL) 1.1什么是企 ...
python之网络部分
1.C/S B/S架构 C: client端 B: browse 浏览器 S: server端 C/S架构: 基于客户端与服务端之间的通信 QQ, 游戏,皮皮虾, 快手,抖音. 优点: 个性化 ...
微信小程序报错 “对应的服务器无效。控制台输入 showRequestInfo（）可以获取更详细信息”
之前做的项目突然无法读出数据了,一测试发现报这个错误==>对应的服务器无效.控制台输入 showRequestInfo()可以获取更详细信息,后来发现是SSL证书到期了.重新申请了一个证书,免费 ...
微信内置浏览器不支持 onclick 如何解决？（原因是因为内面中的内容或者标签大部分是动态生成的）
使用了很多onclick事件,但是在Android的微信内置浏览器中,onclick是不能被执行的. 开始的写法是: // $(".contentPic").click(funct ...

解决ios横屏拍照图片自动旋转90度问题

解决ios横屏拍照图片自动旋转90度问题的更多相关文章

随机推荐

热门专题