600字范文 > 上传图片的时候 ios手机的图片会旋转90°

上传图片的时候 ios手机的图片会旋转90°

时间：2022-09-02 17:44:32

1、问题：在html5中利用canvas对上传图片压缩的时候，ios手机竖着拍照时，图片会旋转90°，其他情况正常。

2、解决方法：获取拍照角度，对Ios竖着拍的照片进行角度处理

3、利用exif.js获取到照片的拍摄信息，这里主要用到Orientation，这个属性

Orientation 旋转角度

10°

3180°

690°

8270°

旋转方向都为顺时针

下面介绍图片的压缩和对ios拍照问题的解决案例

先要引入exif.js文件和jquery.js文件

<script src="/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000"></script><script type="text/javascript" src='js/exif.js?v=b5d2a25070'></script>

4、html

<input type="file" id="upLoad" name="image"><div id='previewImg'><img id='viewImg'/></div>

5、js

$('#upLoad').on('change',function(){$('#loding').css('display','block');var filePath = $(this).val(), //获取到input的value，里面是文件的路径fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),// src = '', //转成可以在本地预览的blob格式imgBase64 = '',//存储图片的imgBase64fileObj = document.getElementById('upLoad').files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象uploadAddress = globalConfig.pre_api_url + '/wxwall_api/msg/pa_upload_img.php',data = null;// 检查是否是图片if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {error_prompt_alert('上传错误,文件格式必须为：png/jpg/jpeg');$('#loding').css('display','none');return; }// 对图片进行压缩compress(fileObj,function(imgBase64){imgBase64 = imgBase64;// 对图片压缩成功之后，在定义上传参数，和请求；放在compress（）外面的话，则先执行request（）请求，此时imgBase64还未赋值赋值// 定义上传的参数data = {'imgBase64':imgBase64,'openid':openid};// 发送上传图片的请求request(uploadAddress,data,function(res){console.log(res.msg);$('#loding').css('display','none');remote_pa_img_path = res.data.remote_pa_img_path;$('#viewImg').attr('src',imgBase64); //显示预览图片$('#imgBox').addClass('imgBox2');},function(res){console.log(res.msg);$('#loding').css('display','none');});}); });// 不对图片进行压缩，直接转成base64function directTurnIntoBase64(fileObj,callback){var r = new FileReader();// 转成base64r.onload = function(){//变成字符串imgBase64 = r.result;console.log(imgBase64);callback(imgBase64);}r.readAsDataURL(fileObj); //转成Base64格式}// 对图片进行压缩function compress(fileObj, callback) { if ( typeof (FileReader) === 'undefined') { console.log("当前浏览器内核不支持base64图标压缩"); //调用上传方式不压缩 directTurnIntoBase64(fileObj,callback);} else { try { var Orientation=null,reader = new FileReader(); // reader.readAsDataURL(fileObj); //获取图片Orientation参数EXIF.getData(fileObj, function() {Orientation = EXIF.getTag(this, 'Orientation');});reader.onload = function (e) { var image = $('<img/>'); image.attr('src', e.target.result); image.load(function(){ var data='',canvas = document.createElement('canvas'), context = canvas.getContext('2d'),imageWidth = this.width,imageHeight = this.height;//压缩图片if(imageWidth > 1000 || imageHeight > 1000) {//等比例压缩，不失真，不裁剪if( imageWidth > imageHeight){imageWidth = 1000;imageHeight = imageWidth*imageHeight/this.width;}else{imageHeight = 1000;imageWidth = imageHeight*imageWidth/this.height;}}//旋转到正常角度,位置偏移var angle = 0;var x =0 ,y=0,w=imageWidth,h=imageHeight; //canvas画布// 定义画布的大小canvas.width = imageWidth;canvas.height = imageHeight;context.drawImage(this, x, y,imageWidth,imageHeight); /*Orientation:3:ios手机底部在左边，拍出来的横图是倒置的，需要旋转180度6:ios手机底部朝下，拍出来的照片是头在右边，需要逆时针旋转90度*/switch(Orientation){case 3:rotateImg(this,'half',canvas);//转两次 break;case 6:rotateImg(this,'left',canvas); break;case 8:rotateImg(this,'right',canvas); break;default:break;}// context.rotate(angle); // 画图// context.drawImage(this, x, y,imageWidth,imageHeight); data = canvas.toDataURL('image/jpeg'); //转成bae64编码callback(data);}); }; reader.readAsDataURL(fileObj); } catch(e) { console.log("压缩失败!"); //调用直接上传方式不压缩 directTurnIntoBase64(fileObj,callback); } }} //对图片旋转处理 added by lzk function rotateImg(img, direction,canvas) { //alert(img); //最小与最大旋转方向，图片旋转4次后回到原方向 var min_step = 0; var max_step = 4; //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 if(direction == 'half'){} else{ step--; step < min_step && (step = max_step); } //img.setAttribute('step', step); /*var canvas = document.getElementById('pic_' + pid); if (canvas == null) { img.style.display = 'none'; canvas = document.createElement('canvas'); canvas.setAttribute('id', 'pic_' + pid); img.parentNode.appendChild(canvas); } */ //旋转角度以弧度值为参数 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; } }

6、exif.js代码如下：

转载链接：利用exif.js解决ios手机上传竖拍照片旋转90度问题

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。