iOS下html上传图片被旋转
- 解决方法用exif.js+canvas
既然是解决问题，那就简单说一下，直接上代码！
html方式使用<input type="file">在iOS上可以直接调用照相机拍照，竖拍出来的图片都会变成横图！
思路：获取到照片拍摄的方向角，对非横拍的ios照片使用canvas的rotate进行角度旋转修正。
页面引入exif.js 网盘分享给你吧
利用exif.js读取照片的拍摄信息，详见
这里主要用到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 随意
js
// 转换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了，请更换照片') } } });