H5移动端下html上传图片被旋转问题(转)

转:https://www.cnblogs.com/simonbaker/p/5279351.html

iOS下,html方式使用<input type="file">上传图片,图片会被旋转。遇到这个问题js是无法解决的,html也没有相应的解决方案。只能放到后台去处理,将旋转的图片再旋转回来。iOS拍摄的图片提供了EXIF信息,Orientation值为6即顺时针90度,有了这个信息我们只需要逆时针旋转90度即可。

 

可是,后端把图片旋转后,没有把图片的宽高调换过来!!

所以,我这边前端一直再重复计算裁剪的x y w h,怎么计算,都对用手机竖着拍照的照片存在偏差。

后面和后端同学一起聊的时候,才发现应该是后端在把图片逆旋转90度的同时,没有把图片的换高调换过来。

因此,解决方案是:

后端在旋转图片的时候,记得看看宽高是否也要调换下。

 

 

 

可参考:

http://www.thinksaas.cn/group/topic/351028/

http://www.cnblogs.com/simonbaker/p/5279333.html

http://www.cnblogs.com/simonbaker/p/5279342.html

posted on 2017-12-19 14:45  菜鸟也是bird 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/yuanyang/p/8065596.html

使用规范:  var file = $("#file_input")[0].files[0]; if(file.size / 1024 > 1024 * 5){ mui.toast('图片不能超过5M'); return; } //图片压缩 compress.rotatePhotoCompress(file,function(imageObj){ var formData = new FormData(); formData.append("uploadFile", imageObj, file.name); // 文件对象 //图片上传 uploadAdd(formData); }); /** * 图片上传 * @param formData */ function uploadAdd(formData){ var URL = apiUrl.addMultImageURL+"?plateTag=order&fileOwnerId=order&fileType=image&token;="+app.getToken(); $.ajax({ url: URL, //请求地址 type: "post", async: true, //默认为异步 data: formData, //参数 contentType: false, //数据请求格式 processData:false, xhr:function(){ myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ // check if upload property exists myXhr.upload.addEventListener('progress',function(e){ //显示进度条 $("#progress1").show(); var loaded = e.loaded;//已经上传大小情况 var tot = e.total;//附件总大小 var per = Math.floor(100*loaded/tot); //已经上传的百分比 mui("#progress1").progressbar({progress:per}).show(); }, false); // for handling the progress of the upload } return myXhr; },// 成功 success: function (data) { //隐藏进度条 $("#progress1").hide(); if (data.error == 0 && null != data.url) { mui.toast('上传图片成功'); $('.show_img').append("<div class='imgList'><span class='oClose'>X</span><img src="+app.fileUrl+data.url+"><input type='hidden' name='imgUrls["+count+"]' value="+data.url.replace(app.fileUrl,"")+"></div>"); count++; } else { mui.toast('上传图片失败'); $('#uploadPicButton').html('请你选择图片重新上传'); } }, error:function(rep) { $("#progress1").hide(); console.log(JSON.stringify(rep)); mui.toast('上传异常'); } }) }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值