你的位置:首页 > 软件开发 > 网页设计 > html5上传图片(二)一解决部分手机拍照上传图片转向问题

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

发布时间:2016-08-05 17:00:08
本以为解决跨域上传后没有问题了,不成想被测试找出一个问题,那就是在手机上拍照上传后图片会旋转。很头痛,不过没有办法,问题还是需要解决的。在查阅了一系列资料后我找到了相应的解决方案,利用exif.js获取图片旋转的方向,然后再转过来图片,之后再上传。这个方案需要修改前面的脚本,同样 ...

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

html5上传图片(二)一解决部分手机拍照上传图片转向问题html5上传图片(二)一解决部分手机拍照上传图片转向问题
 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 (#换成@)。