ios系统 竖屏拍照 canvas处理后 图片旋转(利用exif.js解决ios手机上传竖拍照片旋转90度问题)

转:https://www.cnblogs.com/lovelgx/articles/8656615.html

---恢复内容开始---

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

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

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

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

这里主要用到Orientation属性。

Orientation属性说明如下:

exif.js 参考 http://code.ciaoca.com/javascript/exif-js/

主要代码参考如下:

<input type="file" id="files" >
<img src="blank.gif" id="preview">
<script src="exif.js"></script>
<script>
var ipt = document.getElementById(‘files‘),
    img = document.getElementById(‘preview‘),
    Orientation = null;
ipt.onchange = function () {
    var file = ipt.files[0],
        reader = new FileReader(),
        image = new Image();

    if(file){
        EXIF.getData(file, function() {
            Orientation = EXIF.getTag(this, ‘Orientation‘);
        });
        reader.onload = function (ev) {
            image.src = ev.target.result;
            image.onload = function () {
                var imgWidth = this.width,
                    imgHeight = this.height;
                // 控制上传图片的宽高
                if(imgWidth > imgHeight && imgWidth > 750){
                    imgWidth = 750;
                    imgHeight = Math.ceil(750 * this.height / this.width);
                }else if(imgWidth < imgHeight && imgHeight > 1334){
                    imgWidth = Math.ceil(1334 * this.width / this.height);
                    imgHeight = 1334;
                }

                var canvas = document.createElement("canvas"),
                ctx = canvas.getContext(‘2d‘);
                canvas.width = imgWidth;
                canvas.height = imgHeight;
                if(Orientation && Orientation != 1){
                    switch(Orientation){
                        case 6:     // 旋转90度
                            canvas.width = imgHeight;
                            canvas.height = imgWidth;
                            ctx.rotate(Math.PI / 2);
                            // (0,-imgHeight) 从旋转原理图那里获得的起始点
                            ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
                            break;
                        case 3:     // 旋转180度
                            ctx.rotate(Math.PI);
                            ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
                            break;
                        case 8:     // 旋转-90度
                            canvas.width = imgHeight;
                            canvas.height = imgWidth;
                            ctx.rotate(3 * Math.PI / 2);
                            ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
                            break;
                    }
                }else{
                    ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
                }
                img.src = canvas.toDataURL("image/jpeg", 0.8);
            }
        }
        reader.readAsDataURL(file);
    }
}
</script>

---恢复内容结束---

通过上述参考代码,实践一个比较适用的代码

主要参考文章 http://www.cnblogs.com/xjnotxj/p/5576073.html

代码如下 :

<li style="height:100px;line-height:100px"><span  class="">图片</span>    <canvas id="myCanvas" style="display: none"></canvas>    <img src=""  id="ago" style="display: none">    <div class="check_img"><img src=""  id="check_img" ></div>    <div class="imgupdata">        <!--<input type="file" id="fileId" name="fileId" hidefocus="true">-->        <input type="file"  id="uploadImage" onchange="selectFileImage(this);" />    </div></li>

function selectFileImage(fileObj) {
    var file = fileObj.files[‘0‘];
    var agoimg=document.getElementById("ago");
    //图片方向角 added by lzk
    var Orientation = null;
    if (file) {
        var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
        if (!rFilter.test(file.type)) {
            wfy.alert("请选择jpeg、png格式的图片");
            return;
        }
        // var URL = URL || webkitURL;
        //获取照片方向角属性,用户旋转控制
        EXIF.getData(file, function() {
            EXIF.getAllTags(this);
            Orientation = EXIF.getTag(this, ‘Orientation‘);
        });
        var oReader = new FileReader();
        oReader.onload = function(e) {
            var image = new Image();
            image.src = e.target.result;
            agoimg.src = e.target.result;
            agoimg.onload = function() {
                var expectWidth = this.naturalWidth;
                var expectHeight = this.naturalHeight;
                var calc = expectWidth / expectHeight; //比例参数 实现等比缩放
                var canvas = document.getElementById(‘myCanvas‘);
                var ctx = canvas.getContext("2d");
                canvas.width = 1200;//此处可以随便设置 压缩后的宽度
                canvas.height = (canvas.width)*calc;
                console.log(‘canvas数据‘+canvas.width)
                var base64 = null;
                //修复ios Orientation  ==6 只考虑一种情况 为做全面优化
                if (Orientation == 6) {
                    //alert(‘需要顺时针(向左)90度旋转‘);
                    ctx.save(); //保存状态
                    ctx.translate(canvas.width/2, canvas.height/2); //设置画布上的(0,0)位置,也就是旋转的中心点
                    ctx.rotate(90 * Math.PI / 180); //把画布旋转90度
                    // 执行Canvas的drawImage语句
                    ctx.drawImage(image, -(canvas.width/2), -(canvas.height/2), canvas.width, canvas.height); //把图片绘制在画布translate之前的中心点,这是关键点
                    ctx.restore(); //恢复状态
                }else {
                    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
                }
                base64 = canvas.toDataURL("image/jpeg", 0.92);
                $("#check_img").attr("src", base64);
            };
        };
        oReader.readAsDataURL(file);
    }
    //$(‘#uploadImage‘).imgloadsize();

}

原文地址:https://www.cnblogs.com/whatstone/p/11183646.html

时间: 2024-10-09 22:14:50

ios系统 竖屏拍照 canvas处理后 图片旋转(利用exif.js解决ios手机上传竖拍照片旋转90度问题)的相关文章

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

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,详见  http://code.ciaoca.com/javascript/exif-js/ 这里主要用到Orientation属性. Orientation属性说明如下: 旋转角度 参数 0° 1 顺时针90° 6 逆时针9

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

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 这里主要利用exif.js读取照片的拍摄信息. Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展,例如:拍照方向.相机设备型号.拍摄时间.ISO 感光度.GPS 地理位置等数据. EXIF 数据主要来自拍摄的照片,多用于移动端开发,PC

竖屏拍照,但是sd卡中却是横屏解决方法

protected void onActivityResult(int requestCode, int resultCode, Intent data) { switch (resultCode) { case 1: if (data != null) { // 取得返回的Uri,基本上选择照片的时候返回的是以Uri形式,但是在拍照中有得机子呢Uri是空的,所以要特别注意 Uri mImageCaptureUri = data.getData(); // 返回的Uri不为空时,那么图片信息数据

iOS界面设置竖屏,个别界面强制横屏

项目需要,只有某个界面需要横屏显示,其它全只支持竖屏显示即可,网上资料很多,但是试过都不好用,最后发现是因为我的项目UIViewController外层是UINavigationVeiwController,只在UIViewController重载supportedInterfaceOrientations与shouldAutorotate 方法是不行的. 下面说明具体设置步骤:(参考http://www.cocoachina.com/bbs/read.php?tid-244095.html)

解决ASIHTTP setFile上传文件后中文乱码问题

这问题困扰我好长时间,不上传文件就不是乱码,传文件就乱码,并且Android好使;最后联合中间件后台/Android客户端/IOS客户端,共同上传比较,最后在后台捕捉时发现,Android的提交输出格式为: --PfyXAYcEcmd3GqueWEk6hXUWXfm-KrG4XNEQContent-Disposition: form-data; name="companyName"Content-Type: text/plain; charset=UTF-8Content-Transf

去掉iframe默认滚动条后影响正常滚动以及js解决高度自适应。

对于iframe,相信大家都是知道存在很多弊端,比如说不利于搜索引擎的抓取:产生冗余结构体系不易管理等.不过在漫长的开发路上有时候使用是不可避免的. 前两天在做一个退弹的功能的时候使用了iframe,由于我设置的滚动条属性是:scrolling="auto",首先出现的问题是右侧有两个滚动条,不难想到一个是父级页面的,另一个就是iframe自带的.好在iframe去掉自身滚动条还比较方便,设置了scrolling="no"后就消失了,我以为问题就解决了,然而,我发现

解决windows文件上传到unix后 产生^M的问题

在aix6.1 上部署的发现 通过ftp从windows上传到aix上的文件 用vi打开后发现 每行后都多了^M 网上寻找解决方案 cd 到文件夹所在目录 vi filename 然后输入 :%s/^M$//g 注意 此处命令中的M 是通过键入"CTRL-V CTRL-M"生成的! 该命令的意思是 "去掉所有行末的M"

ajax 动态载入html后不能执行其中的js解决方法

事件背景 有一个公用页面需要在多个页面调用,其中涉及到部分js已经写在了公用页面中,通过ajax加载该页面后无法执行其中的js. 解决思路 1. 采用附加一个iframe的方法去执行js,为我等代码洁癖者所不齿. 2. 使用document.write输出代码,我等简洁主义者所不愿. 3. 最简单的方法是把js放到需要调用的父页面,那想这样的公用页面,每个地方调用都要写入一次,代码冗余. 4. eval是个解决方法,虽然低效. 5. 复杂的解决方法:正则匹配出加载页面中的所有js,为这些js创建

Exchange服务器系统蓝屏及脱域后解决办法

在工作中有时会出现Exchange服务器在意外重启后蓝屏并且无法直接恢复的情况,通过灾难恢复方式处理之后稳定运行一个月该服务器又出现脱域的现象.在此我总结处理问题的过程及思路,希望能对同行有所帮助. 环境: 操作系统:Windows Server 2008 R2 sp1 Exchange版本:Exchange2010sp3 CU8 架构:3台CAS+4台MBX 现象:CAS服务器中的一台(用CAS2表示)系统在意外重启后无法进入系统.测试同样无法进入安全模式和最后一次正确配置. 解决过程: 确认