摘要:下上传图片被旋转解决方法用既然是解决问题,那就简单说一下,直接上代码方式使用在上可以直接调用照相机拍照,竖拍出来的图片都会变成横图思路获取到照片拍摄的方向角,对非横拍的照片使用的进行角度旋转修正。
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 随意
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了,请更换照片") } } });
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/89162.html
摘要:上传图片顺时针旋转度问题使用获取图片当前拍摄角度修正后展示裁切位置不正确或需要减去的差值问题描述当目标元素的上级元素中有使用时,用如上的方法都会导致计算错误,这一在常用框架,类库中都存在。应该是和在实现上的差异造成了。 bug1.ios 上传图片 顺时针旋转90度问题 solution1.使用exif.js获取图片当前拍摄角度 修正后展示 http://www.mamicode.com...
前言 记得16年的时候我初入前端差不多一年,公司做了一个webapp,有上传头像功能,当时这个项目不是我在负责,测试的时候发现苹果用户拍照上传头像会翻转,当时几个前端的同学捯饬了一下午也没解决,结果问题转到我这里,还有半个小时下班;当时也是一脸懵逼,首先想到的是,这怎么判断它是否翻转了呢?安卓没问题啊,有些苹果手机相册里面的图片也没问题啊,js能有这种功能判断吗?上网查资料,果不其然,有!那就是e...
摘要:后续过了几天,公司购置了几台全新的测试机,测试同学将系统在一台三星的机子上一测,又发现新问题了选择完图片进行本地预览时,发现图片翻转了但上传后再展示又是正常的。 最近在处理移动端选择图片实时预览并上传时遇到一个问题:上传前图片预览正常,但上传到服务器上的图片展示到页面上时,有时会出现图片翻转的问题,一般是翻转 90 度。后经一翻研究找到了问题所在,特在此记录一下。 问题描述 接上面提到...
摘要:上周做一个关于移动端图片压缩上传的功能。利用,进行图片的压缩,得到图片的的值上传文件。 上周做一个关于移动端图片压缩上传的功能。期间踩了几个坑,在此总结下。 大体的思路是,部分API的兼容性请参照caniuse: 利用FileReader,读取blob对象,或者是file对象,将图片转化为data uri的形式。 使用canvas,在页面上新建一个画布,利用canvas提供的API,...
阅读 596·2023-04-26 01:53
阅读 2705·2021-11-17 17:00
阅读 2844·2021-09-04 16:40
阅读 1946·2021-09-02 15:41
阅读 786·2019-08-26 11:34
阅读 1197·2019-08-26 10:16
阅读 1287·2019-08-23 17:51
阅读 773·2019-08-23 16:50