本以为解决跨域上传后没有问题了,不成想被测试找出一个问题,那就是在手机上拍照上传后图片会旋转。很头痛,不过没有办法,问题还是需要解决的。在查阅了一系列资料后我找到了相应的解决方案,利用exif.js获取图片旋转的方向,然后再转过来图片,之后再上传。这个方案需要修改前面的脚本,同样 ...
本以为解决跨域上传后没有问题了,不成想被测试找出一个问题,那就是在手机上拍照上传后图片会旋转。很头痛,不过没有办法,问题还是需要解决的。在查阅了一系列资料后我找到了相应的解决方案,利用exif.js获取图片旋转的方向,然后再转过来图片,之后再上传。这个方案需要修改前面的脚本,同样的,由于要传base64字符串,后台也要做出相应的修改。下面是我修改后的相应代码:
1 (function () { 2 var imgOperate = { 3 operateUrl: "更改图片在数据库中的状态地址", 4 uploadUrl: "代理图片上传地址", 5 DelPicId: '', 6 ddWidth: 0, 7 dlWidth:0, 8 successCount:0, 9 onload: function () { 10 this.initImage(); 11 }, 12 initImage: function () { 13 var et = $('#entrust dd').length; 14 this.ddWidth = $('#entrust dd').width() + 17; 15 this.dlWidth = parseInt(et * this.ddWidth + 160); 16 $('#entrust').css("width", this.dlWidth); 17 this.BindEvent(); 18 }, 19 BindEvent: function () { 20 var _this = this; 21 $("#pic0").on("change", function () { 22 23 _this.uploadFiles(this); 24 25 }); 26 27 }, 28 InserImage:function(urls,dd) 29 { 30 $.post(this.operateUrl, { houseid: houseid, operateType: 1, picStr: urls }, function (data) { 31 data = eval("(" + data + ")"); 32 if (data && data.picIds) 33 { 34 dd.getElementsByTagName("img")[0].setAttribute("housepicid", data.picIds); 35 } 36 }); 37 }, 38 uploadFiles: function (where) { 39 if (!houseid) { 40 this.ShowMsg("请回到第一步完善相应的信息"); 41 return; 42 } 43 var imgLength = $("#entrust dd").length - 1; 44 45 if (imgLength >= 50) 46 { 47 this.ShowMsg("你的图片超过了50张,不能再上传"); 48 return; 49 } 50 if (imgLength + where.files.length > 50) 51 { 52 this.ShowMsg("你选择的图片超过了50张,无法上传,请重新选择"); 53 return; 54 } 55 56 57 var _this = this; 58 var radtime = new Date(); 59 var sid = radtime.getTime(); 60 this.successCount=0; 61 for (var i = 0; i < where.files.length; i++) { 62 var formData = new FormData(); 63 var file = where.files[i]; 64 var orientation = 1; 65 66 if (file.name.indexOf("jpg") > -1) { 67 EXIF.getData(file, function () { 68 EXIF.getAllTags(this); 69 orientation = EXIF.getTag(this, 'Orientation'); 70 if (orientation) { 71 var reader = new FileReader(); 72 reader.onload = function (e) { 73 _this.getImgData(e, this.result, orientation, function (data) { 74 75 var base64String = data; 76 formData.append("icoimage", base64String); 77 _this.UploadImg(where, formData, sid, i); 78 }); 79 } 80 reader.readAsDataURL(file); 81 } else { 82 formData.append("icoimage", file); 83 _this.UploadImg(where, formData, sid, i); 84 } 85 }); 86 } else { 87 formData.append("icoimage", file); 88 _this.UploadImg(where, formData, sid, i); 89 } 90 91 92 93 } 94 95 }, 96 UploadImg: function (where, formData, sid, i) { 97 var _this = this; 98 $.ajax({ 99 url: this.uploadUrl + '?channel=频道&sid=' + sid,100 type: 'POST',101 cache: false,102 data: formData,103 processData: false,104 contentType: false105 }).success(function (res) {106 var imgsrc = res;107 if (imgsrc == "-1" || imgsrc == "302" || imgsrc == -1 || imgsrc == 302) {108 _this.ShowMsg("上传失败,照片超过10M");109 } else if (imgsrc.indexOf("http") != -1) {110 var dd = document.createElement("dd");111 if ($("#entrust dd").length == 1) {112 dd.innerHTML = "<div class=\"cver\">封面图</div><a class=\"close\"></a><img src='/images/loading.gif' data-original=\"" + imgsrc + "\" housepicid=\"\">";113 } else {114 dd.innerHTML = "<a class=\"close\"></a><img src='/images/loading.gif' data-original=\"" + imgsrc + "\" housepicid=\"\">";115 }116 document.getElementById("entrust").appendChild(dd);117 _this.dlWidth += _this.ddWidth + 17;118 $('#entrust').css("width", _this.dlWidth);119 _this.InserImage(imgsrc, dd);120 this.successCount++;121 _this.ShowMsg("正在上传第" + i + "张图片");122 }123 if (i == where.files.length) {124 if (this.successCount > 0) {125 _this.ShowMsg("成功上传" + successCount + ",可继续上传新照片");126 }127 } 128 129 })130 },131 ShowMsg: function (text, mymethod) {132 var radtime = new Date();133 var sid = radtime.getTime();134 var msg_div = "<div class='zuopenbox' id='div_msg" + sid + "'><div class='opencon_01'><div class='openList'><h3 class='f15' style='margin-bottom: 0; color: #FFFFFF'>" + text + "</h3></div></div></div>";135 136 $(msg_div).appendTo("body");137 var _this = this;138 setTimeout(function () {139 var d = 0.5;140 var m = document.getElementById("div_msg"+sid);141 m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';142 m.style.opacity = '0';143 setTimeout(_this.RemoveNode(m), 500);144 }, 500);145 },146 RemoveNode: function (m) {147 m.parentNode.removeChild(m);148 },149 // @param {string} img 图片的base64150 // @param {int} dir exif获取的方向信息151 // @param {function} next 回调方法,返回校正方向后的base64152 getImgData: function (e,img, dir, next) {153 var _this = this;154 var image = new Image();155 image.src = e.target.result;156 image.onload=function(){157 var degree=0,drawWidth,drawHeight,width,height;158 drawWidth=this.naturalWidth;159 drawHeight=this.naturalHeight;160 //以下改变一下图片大小161 var maxSide = Math.max(drawWidth, drawHeight);162 if (maxSide > 1024) {163 var minSide = Math.min(drawWidth, drawHeight);164 minSide = minSide / maxSide * 1024;165 maxSide = 1024;166 if (drawWidth > drawHeight) {167 drawWidth = maxSide;168 drawHeight = minSide;169 } else {170 drawWidth = minSide;171 drawHeight = maxSide;172 }173 }174 var canvas=document.createElement('canvas');175 canvas.width=width=drawWidth;176 canvas.height=height=drawHeight; 177 var context = canvas.getContext('2d');178 //判断图片方向,重置canvas大小,确定旋转角度,iphone默认的是home键在右方的横屏拍摄方式179 switch(dir){180 case 2:181 context.translate(width, 0);182 context.scale(-1, 1);183 break;184 case 3:185 context.translate(width, height);186 context.rotate(Math.PI);187 break;188 case 4:189 context.translate(0, height);190 context.scale(1, -1);191 break;192 case 5:193 context.rotate(0.5 * Math.PI);194 context.scale(1, -1);195 break;196 case 6:197 context.rotate(0.5 * Math.PI);198 context.translate(0, -height);199 break;200 case 7:201 context.rotate(0.5 * Math.PI);202 context.translate(width, -height);203 context.scale(-1, 1);204 break;205 case 8:206 context.rotate(-0.5 * Math.PI);207 context.translate(-width, 0);208 break;209 210 }211 212 context.drawImage(this,0,0,drawWidth,drawHeight);213 //返回校正图片214 next(canvas.toDataURL("image/jpeg",.8));215 }216 image.src='/images/loading.gif' data-original=img;217 }218 219 }220 221 imgOperate.onload();222 window.imgOperate = imgOperate;223 224 })();225
原标题:html5上传图片(二)一解决部分手机拍照上传图片转向问题
关键词:HTML
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。