解决移动端iOS下上传图片被旋转问题。

zhunjiee 发布于2019-08-21 17:08 / 2853人阅读

摘要：下上传图片被旋转解决方法用既然是解决问题，那就简单说一下，直接上代码方式使用在上可以直接调用照相机拍照，竖拍出来的图片都会变成横图思路获取到照片拍摄的方向角，对非横拍的照片使用的进行角度旋转修正。

iOS下html上传图片被旋转

解决方法用exif.js+canvas

既然是解决问题，那就简单说一下，直接上代码！

html方式使用在iOS上可以直接调用照相机拍照，竖拍出来的图片都会变成横图！

思路：获取到照片拍摄的方向角，对非横拍的ios照片使用canvas的rotate进行角度旋转修正。

页面引入exif.js 网盘分享给你吧http://pan.baidu.com/s/1geNuzGf

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

这里主要用到Orientation属性。

   EXIF.getData(_ImgFile,  function() {     //_ImgFile图片数据
    var Orientation = EXIF.getTag(this, "Orientation");   
     return Orientation                   //Orientation返回的参数 1 、3 、6 、8
    });

Orientation 参数 1、3、6、8 对应的你需要旋转的角度

1   0°
3   180°    
6   顺时针90°
8   逆时针90°

ios拍出来照片信息里面Orientation 是6 顺时针90°

         switch(Orientation){
                                case 6:     // 旋转90度
                                    widthORheight=0;
                                    cvs.width = this.height * scale;
                                    cvs.height = this.width * scale;
                                    ctx.rotate(Math.PI / 2);
                                    // (0,-imgHeight) 从旋转原理图那里获得的起始点
                                    ctx.drawImage(this, 0,-this.height * scale,  this.width * scale, this.height * scale  );
                                    break;
                                case 3:     // 旋转180度
                                    ctx.rotate(Math.PI);
                                    ctx.drawImage(this, -this.width * scale, -this.height * scale,  this.width * scale, this.height * scale);
                                    break;
                                case 8:     // 旋转-90度
                                    widthORheight=0;
                                    cvs.width = this.height * scale;
                                    cvs.height = this.width * scale;
                                    ctx.rotate(3 * Math.PI / 2);
                                    ctx.drawImage(this, - this.width * scale, 0,  this.width * scale, this.height * scale);
                                    break;

                            }

全部代码

htlm：

css 随意

        // 转换blob对象用于上传
        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type:mime});
        }
        
    
    var imgBlobIndex=[];  //存放多张图片的的容器。用于多张图片上传或者删除多张图片中某一张图片，
        

     $("#showImg").change(function() {
        var listNunber=$("#fileList").find("img").length,
            Orientation = null,
            _this = $(this)[0],
            _leng = this.files.length,
            maxSize = 2500000,// 限制单张大小2.5M
            minSize=100000;   //压缩临界 1M
           
                for (var j = 0; j < _leng; j++) {
                    var _filelist = _this.files[j],
                        fileType = _filelist.type,
                        size = _filelist.size;     //获取图片的大小
                    if (size < maxSize) {        
                                                  //获取图片Orientation参数
                        EXIF.getData(_filelist, function() {
                            Orientation = EXIF.getTag(this, "Orientation");
                        });
                         
                        var fileReader = new FileReader();
                        fileReader.readAsDataURL(_filelist);
                        fileReader.onload = function (event) {
                            var result = event.target.result;   //返回的dataURL
                            var image = new Image();
                            image.src = result;
                            image.onload = function () {//创建一个image对象，给canvas绘制使用

                                var cvs = document.createElement("canvas");
                                var ctx = cvs.getContext("2d");
                                var scale = 1;          //预留压缩比
                    
                                cvs.width = this.width * scale;
                                cvs.height = this.height * scale;//计算等比缩小后图片宽高

                                if(Orientation && Orientation != 1){
                                    switch(Orientation){
                                        case 6:     // 旋转90度
                                            
                                            cvs.width = this.height * scale;
                                            cvs.height = this.width * scale;
                                            ctx.rotate(Math.PI / 2);
                                            // (0,-imgHeight) 从旋转原理图那里获得的起始点
                                            ctx.drawImage(this, 0,-this.height * scale,  this.width * scale, this.height * scale  );
                                            break;
                                        case 3:     // 旋转180度
                                            ctx.rotate(Math.PI);
                                            ctx.drawImage(this, this.width * scale, -this.height * scale,  this.width * scale, this.height * scale);
                                            break;
                                        case 8:     // 旋转-90度
                                        
                                            cvs.width = this.height * scale;
                                            cvs.height = this.width * scale;
                                            ctx.rotate(3 * Math.PI / 2);
                                            ctx.drawImage(this, - this.width * scale, 0,  this.width * scale, this.height * scale);
                                            break;

                                    }
                                }else{
                                    ctx.drawImage(this, 0, 0,  cvs.width, cvs.height);
                                }
                               /* ctx.drawImage(this, 0, 0, cvs.width, cvs.height);*/
                                if(size";  //创建预览对象
                                imgid++;
                                i++;
                                $("#fileList").append(img);   //图片预览容器

                                
                                var imgdata=dataURLtoBlob(newImageData);  //  创建blob 用于上传
                                imgBlobIndex.push(imgdata);                   //多张图片时上传用
                                                                
                            };
                        };
                    }else {    
                      alert("您照片大小超过2.5M了，请更换照片")
                    }
                }
           
      
    });

云服务器 GPU云服务器 H5移动端上传图片上传图片旋转手机端上传图片安卓端上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89162.html

移动端图片上传踩坑记录（包括平移缩放旋转裁切）

摘要：上传图片顺时针旋转度问题使用获取图片当前拍摄角度修正后展示裁切位置不正确或需要减去的差值问题描述当目标元素的上级元素中有使用时，用如上的方法都会导致计算错误，这一在常用框架，类库中都存在。应该是和在实现上的差异造成了。 bug1.ios 上传图片顺时针旋转90度问题 solution1.使用exif.js获取图片当前拍摄角度修正后展示 http://www.mamicode.com...

Richard_Gao 2019-08-20 16:57 评论0 收藏0
用exfe.js和canvas解决移动端 IOS 拍照上传图片翻转问题

前言记得16年的时候我初入前端差不多一年，公司做了一个webapp，有上传头像功能，当时这个项目不是我在负责，测试的时候发现苹果用户拍照上传头像会翻转，当时几个前端的同学捯饬了一下午也没解决，结果问题转到我这里，还有半个小时下班；当时也是一脸懵逼，首先想到的是，这怎么判断它是否翻转了呢？安卓没问题啊，有些苹果手机相册里面的图片也没问题啊，js能有这种功能判断吗？上网查资料，果不其然，有！那就是e...

leap_frog 2019-08-23 12:38 评论0 收藏0
移动端上传图片翻转的解决方案

摘要：后续过了几天，公司购置了几台全新的测试机，测试同学将系统在一台三星的机子上一测，又发现新问题了选择完图片进行本地预览时，发现图片翻转了但上传后再展示又是正常的。最近在处理移动端选择图片实时预览并上传时遇到一个问题：上传前图片预览正常，但上传到服务器上的图片展示到页面上时，有时会出现图片翻转的问题，一般是翻转 90 度。后经一翻研究找到了问题所在，特在此记录一下。问题描述接上面提到...

shinezejian 2019-08-19 17:15 评论0 收藏0
移动端H5图片上传的那些坑

摘要：上周做一个关于移动端图片压缩上传的功能。利用，进行图片的压缩，得到图片的的值上传文件。上周做一个关于移动端图片压缩上传的功能。期间踩了几个坑，在此总结下。大体的思路是，部分API的兼容性请参照caniuse：利用FileReader,读取blob对象,或者是file对象，将图片转化为data uri的形式。使用canvas,在页面上新建一个画布,利用canvas提供的API,...

Seay 2019-08-22 10:34 评论0 收藏0