本以为解决跨域上传后没有问题了，不成想被测试找出一个问题，那就是在手机上拍照上传后图片会旋转。很头痛，不过没有办法，问题还是需要解决的。在查阅了一系列资料后我找到了相应的解决方案，利用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: false 105 }).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=\"" + imgsrc + "\" housepicid=\"\">"; 113 } else { 114 dd.innerHTML = "<a class=\"close\"></a><img src=\"" + 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 图片的base64 150 // @param {int} dir exif获取的方向信息 151 // @param {function} next 回调方法，返回校正方向后的base64 152 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=img; 217 } 218 219 } 220 221 imgOperate.onload(); 222 window.imgOperate = imgOperate; 223 224 })(); 225