html5上传图片(二)一解决部分手机拍照上传图片转向问题

本以为解决跨域上传后没有问题了，不成想被测试找出一个问题，那就是在手机上拍照上传后图片会旋转。很头痛，不过没有办法，问题还是需要解决的。在查阅了一系列资料后我找到了相应的解决方案，利用exif.js获取图片旋转的方向，然后再转过来图片，之后再上传。这个方案需要修改前面的脚本，同样的，由于要传base64字符串，后台也要做出相应的修改。下面是我修改后的相应代码：

 (function () {
     var imgOperate = {
         operateUrl: "更改图片在数据库中的状态地址",
         uploadUrl: "代理图片上传地址",
         DelPicId: '',
         ddWidth: 0,
         dlWidth:0,
         successCount:0,
         onload: function () {
             this.initImage();
         },
         initImage: function () {
             var et = $('#entrust dd').length;
             this.ddWidth = $('#entrust dd').width() + 17;
             this.dlWidth = parseInt(et * this.ddWidth + 160);
             $('#entrust').css("width", this.dlWidth);
             this.BindEvent();
         },
         BindEvent: function () {
             var _this = this;
             $("#pic0").on("change", function () {

                 _this.uploadFiles(this);

             });

         },
         InserImage:function(urls,dd)
         {
             $.post(this.operateUrl, { houseid: houseid, operateType: 1, picStr: urls }, function (data) {
                 data = eval("(" + data + ")");
                 if (data && data.picIds)
                 {
                     dd.getElementsByTagName("img")[0].setAttribute("housepicid", data.picIds);
                 }
             });
         },
         uploadFiles: function (where) {
             if (!houseid) {
                 this.ShowMsg("请回到第一步完善相应的信息");
                 return;
             }
             var imgLength = $("#entrust dd").length - 1;

             if (imgLength >= 50)
             {
                 this.ShowMsg("你的图片超过了50张，不能再上传");
                 return;
             }
             if (imgLength + where.files.length > 50)
             {
                 this.ShowMsg("你选择的图片超过了50张，无法上传，请重新选择");
                 return;
             }

             var _this = this;
             var radtime = new Date();
             var sid = radtime.getTime();
             this.successCount=0;
             for (var i = 0; i < where.files.length; i++) {
                 var formData = new FormData();
                 var file = where.files[i];
                 var orientation = 1;

                 if (file.name.indexOf("jpg") > -1) {
                     EXIF.getData(file, function () {
                         EXIF.getAllTags(this);
                         orientation = EXIF.getTag(this, 'Orientation');
                         if (orientation) {
                             var reader = new FileReader();
                             reader.onload = function (e) {
                                 _this.getImgData(e, this.result, orientation, function (data) {

                                     var base64String = data;
                                     formData.append("icoimage", base64String);
                                     _this.UploadImg(where, formData, sid, i);
                                 });
                             }
                             reader.readAsDataURL(file);
                         } else {
                             formData.append("icoimage", file);
                             _this.UploadImg(where, formData, sid, i);
                         }
                     });
                 } else {
                     formData.append("icoimage", file);
                     _this.UploadImg(where, formData, sid, i);
                 }

             }

         },
         UploadImg: function (where, formData, sid, i) {
             var _this = this;
             $.ajax({
                 url: this.uploadUrl + '?channel=频道&sid=' + sid,
                 type: 'POST',
                 cache: false,
                 data: formData,
                 processData: false,
                 contentType: false
             }).success(function (res) {
                 var imgsrc = res;
                 if (imgsrc == "-1" || imgsrc == "302" || imgsrc == -1 || imgsrc == 302) {
                     _this.ShowMsg("上传失败，照片超过10M");
                 } else if (imgsrc.indexOf("http") != -1) {
                     var dd = document.createElement("dd");
                     if ($("#entrust dd").length == 1) {
                         dd.innerHTML = "<div class=\"cver\">封面图</div><a class=\"close\"></a><img src=\"" + imgsrc + "\" housepicid=\"\">";
                     } else {
                         dd.innerHTML = "<a class=\"close\"></a><img src=\"" + imgsrc + "\" housepicid=\"\">";
                     }
                     document.getElementById("entrust").appendChild(dd);
                     _this.dlWidth += _this.ddWidth + 17;
                     $('#entrust').css("width", _this.dlWidth);
                     _this.InserImage(imgsrc, dd);
                     this.successCount++;
                     _this.ShowMsg("正在上传第" + i + "张图片");
                 }
                 if (i == where.files.length) {
                     if (this.successCount > 0) {
                         _this.ShowMsg("成功上传" + successCount + "，可继续上传新照片");
                     }
                 } 

             })
         },
         ShowMsg: function (text, mymethod) {
             var radtime = new Date();
             var sid = radtime.getTime();
             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>";

             $(msg_div).appendTo("body");
             var _this = this;
             setTimeout(function () {
                 var d = 0.5;
                 var m = document.getElementById("div_msg"+sid);
                 m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
                 m.style.opacity = '0';
                 setTimeout(_this.RemoveNode(m), 500);
             }, 500);
         },
         RemoveNode: function (m) {
             m.parentNode.removeChild(m);
         },
         // @param {string} img 图片的base64
         // @param {int} dir exif获取的方向信息
         // @param {function} next 回调方法，返回校正方向后的base64
         getImgData: function (e,img, dir, next) {
             var _this = this;
             var image = new Image();
             image.src = e.target.result;
     image.onload=function(){
         var degree=0,drawWidth,drawHeight,width,height;
         drawWidth=this.naturalWidth;
         drawHeight=this.naturalHeight;
         //以下改变一下图片大小
         var maxSide = Math.max(drawWidth, drawHeight);
         if (maxSide > 1024) {
             var minSide = Math.min(drawWidth, drawHeight);
             minSide = minSide / maxSide * 1024;
             maxSide = 1024;
             if (drawWidth > drawHeight) {
                 drawWidth = maxSide;
                 drawHeight = minSide;
             } else {
                 drawWidth = minSide;
                 drawHeight = maxSide;
             }
         }
         var canvas=document.createElement('canvas');
         canvas.width=width=drawWidth;
         canvas.height=height=drawHeight;
         var context = canvas.getContext('2d');
         //判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
         switch(dir){
             case 2:
                 context.translate(width, 0);
                 context.scale(-1, 1);
                 break;
             case 3:
                 context.translate(width, height);
                 context.rotate(Math.PI);
                 break;
             case 4:
                 context.translate(0, height);
                 context.scale(1, -1);
                 break;
             case 5:
                 context.rotate(0.5 * Math.PI);
                 context.scale(1, -1);
                 break;
             case 6:
                 context.rotate(0.5 * Math.PI);
                 context.translate(0, -height);
                 break;
             case 7:
                 context.rotate(0.5 * Math.PI);
                 context.translate(width, -height);
                 context.scale(-1, 1);
                 break;
             case 8:
                 context.rotate(-0.5 * Math.PI);
                 context.translate(-width, 0);
                 break;

         }

         context.drawImage(this,0,0,drawWidth,drawHeight);
         //返回校正图片
         next(canvas.toDataURL("image/jpeg",.8));
     }
     image.src=img;
 }

     }

     imgOperate.onload();
     window.imgOperate = imgOperate;

 })();
    

前端脚本

   public override void ProcessRequest(HttpContext context)
         {
             //获取目标站点地址
             String target = "图片服务器地址";
             string sid = context.Request["sid"];
             target = string.Format("{0}?city=&channel=频道&sid={1}&backurl=",target,sid);
             string imgText = string.Empty;
             if (context.Request.Files.Count ==  && string.IsNullOrEmpty(imgText=context.Request["icoimage"]))
             {
                 Response.Write("");
                 Response.End();
             }

             Stream stream = new MemoryStream();
             string fileName = string.Empty;
             byte[] bArr = null;
             if (context.Request.Files.Count > )
             {
               var  file = context.Request.Files[];
               fileName = file.FileName;
               stream = file.InputStream;
               bArr = new byte[stream.Length];
               stream.Read(bArr, , bArr.Length);
               stream.Close();
             }
             else {
                 imgText = HttpUtility.UrlDecode(imgText);
                 imgText = Regex.Match(imgText, "(?<=,).*").Value;
                    imgText= imgText.Trim().Replace("%", "").Replace(",", "").Replace(" ", "+");
                    if (imgText.Length %  > )
                    {
                        imgText = imgText.PadRight(imgText.Length +  - imgText.Length % , '=');
                    }
               bArr=Convert.FromBase64String(imgText);

                  fileName = "base64.png";

             }
                 HttpWebRequest request = WebRequest.Create(target) as HttpWebRequest;
                 CookieContainer cookieContainer = new CookieContainer();
                 request.CookieContainer = cookieContainer;
                 request.AllowAutoRedirect = true;
                 request.Method = "POST";
                 request.Headers.Add("Origin", "http://" + context.Request.UrlReferrer.Host);
                 request.Headers.Add("Accept-Encoding", "gzip, deflate");
                 request.Headers.Add("Accept-Language", "zh-CN,zh;q=0.8");
                 request.Headers.Add("Upgrade-Insecure-Requests", "");
                 request.Referer = context.Request.UrlReferrer.OriginalString;
                 string boundary = DateTime.Now.Ticks.ToString("X"); // 随机分隔线
                 request.ContentType = "multipart/form-data;charset=utf-8;boundary=" + boundary;
                 byte[] itemBoundaryBytes = Encoding.UTF8.GetBytes("\r\n--" + boundary + "\r\n");
                 byte[] endBoundaryBytes = Encoding.UTF8.GetBytes("\r\n--" + boundary + "--\r\n");

                 //请求头部信息
                 StringBuilder sbHeader = new StringBuilder(string.Format("Content-Disposition:form-data;name=\"file\";filename=\"{0}\"\r\nContent-Type:application/octet-stream\r\n\r\n",fileName));
                 byte[] postHeaderBytes = Encoding.UTF8.GetBytes(sbHeader.ToString());

                 Stream postStream = request.GetRequestStream();
                 postStream.Write(itemBoundaryBytes, , itemBoundaryBytes.Length);
                 postStream.Write(postHeaderBytes, , postHeaderBytes.Length);
                 postStream.Write(bArr, , bArr.Length);
                 postStream.Write(endBoundaryBytes, , endBoundaryBytes.Length);
                 postStream.Close();
                 //发送请求并获取相应回应数据
                 HttpWebResponse response = request.GetResponse() as HttpWebResponse;
                 SetCookie(response,context);

         }

         //response是目标服务器的响应对象，context是返回给浏览器的上下文对象
         void SetCookie(HttpWebResponse response, HttpContext context)
         {
             foreach (Cookie cookie in response.Cookies)
             {
                 if (cookie.Name!=null&&cookie.Name.StartsWith("Picture"))
                 {
                     string result=string.Empty;
                     if (cookie.Value != null && cookie.Value.StartsWith("http://"))
                     {
                         Regex r = new Regex(@"^.*?(?=\|)");
                         result = r.Match(cookie.Value).Value;
                     }
                     else {
                         result = cookie.Value;
                     }
                     context.Response.Write(result);
                     context.Response.End();
                 }

             }
         }

本次遇到的难题主要是解析base64字符串的问题，总是遇到"输入的不是有效的 Base-64 字符串,因为它包含非 Base-64 字符、两个以上的填充字"。经过反复的调整，终于实现了相应的功能。