首页 > 代码库 > 微信网页IOS上传图片旋转解决方案
微信网页IOS上传图片旋转解决方案
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>分享</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="../../Resource/css/mui.min.css"> <script src="../../Resource/js/mui.min.js"></script> <link href="../../Resource/layer_mobile/need/layer.css" rel="stylesheet" /> <script src="../../Resource/layer_mobile/layer.js"></script> <script src="../../Resource/js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <script src="../../Resource/js/exif.js"></script> <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script> <script src="../../Resource/weixin/hyx_base.js"></script> <script src="../../Resource/weixin/WeiXinShare.js"></script> <style> body { background: #F5F5F5; } .mui-content { background: #f5f5f5; } .mui-input-row { margin-top: 10px; background: #fff; padding: 10px; } textarea { border: none; } .chuan { width: 50px; height: 50px; } .del { position: relative; top: -39px; left: -14px; width: 15px; } footer { position: fixed; bottom: 0px; color: #fff; background: #01BF3A; width: 100%; padding: 12px 0px; text-align: center; font-size: 17px; border-top: 1px solid #eee; } </style></head><body> <div class="mui-input-row"> <textarea id="textarea" rows="5" placeholder="一起聊聊生活把"></textarea> </div> <div class="mui-input-row" id="ImgList"> <img class="chuan" id="imgUpload" src="../../Resource/img/shangcaun.png" /> <input type="file" id="fileToUpload" name="upfile" style=" display:none;" /> </div> <footer id="Add">发送</footer> <script type="text/javascript"> var browser = { versions: function () { var a = navigator.userAgent, b = navigator.appVersion; return { trident: a.indexOf("Trident") > -1, presto: a.indexOf("Presto") > -1, webKit: a.indexOf("AppleWebKit") > -1, gecko: a.indexOf("Gecko") > -1 && a.indexOf("KHTML") == -1, mobile: !!a.match(/AppleWebKit.*Mobile.*/), ios: !!a.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), android: a.indexOf("Android") > -1 || a.indexOf("Linux") > -1, iPhone: a.indexOf("iPhone") > -1, iPad: a.indexOf("iPad") > -1, webApp: a.indexOf("Safari") == -1 } }(), language: (navigator.browserLanguage || navigator.language).toLowerCase() }; var openid = getCookie("openid"); var fileUrl = ""; $(function () { initJSAPI(); if (openid == undefined || openid == "" || openid == null || openid == "null") { var code = getQueryString("code"); if (code == null) { JumpToOauth(); } else { initOpenid(code); } } else { GetUserInfo(openid); } }); function initOpenid(code) { $.ajax({ type: "POST", timeout: 80000, url: "../../GetJsApi/GetOpenid", dataType: "text", data: { "code": code }, beforeSend: function (XMLHttpRequest) { }, success: function (msg) { //获取相应的值，并存放到cookie中去 if (msg == undefined || msg.length == 0) { } else { openid = msg; setCookie("openid", msg, 1); GetUserInfo(openid); } }, complete: function (XMLHttpRequest, textStatus) { if (textStatus == ‘timeout‘) { //超时,status还有success,error等值的情况 alert("请求超时,请返回重试"); } }, error: function (err) { console.log("数据加载失败"); } }); } //获取微信用户是否关注公众号 function GetUserInfo(openid) { $.ajax({ type: "POST", timeout: 80000, url: "../../GetJsApi/WeChatIsFollow", dataType: "json", data: { "openid": openid }, beforeSend: function (XMLHttpRequest) { }, success: function (msg) { if (msg[0].STATUS != "Y") { ShowQrcode(); } }, complete: function (XMLHttpRequest, textStatus) { if (textStatus == ‘timeout‘) { //超时,status还有success,error等值的情况 layerPrompt("请求超时,请返回重试"); } }, error: function (err) { layerPrompt("数据加载失败"); } }); } //上传图片 $("#imgUpload").click(function () { $("#fileToUpload").click(); }) window.setInterval(function () { console.log($("#fileToUpload").val()); if (fileUrl != $("#fileToUpload").val()) { fileUrl = $("#fileToUpload").val(); if (fileUrl != "" && fileUrl != undefined) { layer.open({ type: 2, shadeClose: false, content: ‘正在上传...‘ }); uploadBtnClick(); } } }, 1000) /******************************** 上传图片 */ function uploadBtnClick() { var scope = this; // change pic to base64 if (window.File && window.FileReader && window.FileList && window.Blob) { var filefield = document.getElementById(‘fileToUpload‘), file = filefield.files[0]; //IOS if (browser.versions.ios) { //获取图片的相关信息 EXIF.getData(file, function () { EXIF.pretty(this); var Orientation = EXIF.getTag(this, ‘Orientation‘); processfile(file, uploadCompressFile, scope, Orientation); alert(Orientation); }); //Android } else if (browser.versions.android) { processfile(file, uploadCompressFile, scope, 1); } } else { alert("此浏览器不完全支持上载图片"); } } function processfile(file, uploadCompressFile, scope, Orientation) { var reader = new FileReader(); reader.onload = function (event) { var blob = new Blob([event.target.result]); window.URL = window.URL || window.webkitURL; var blobURL = window.URL.createObjectURL(blob); var image = new Image(); image.src = blobURL; image.onload = function () { var resized = resizeMe(image, Orientation); newImg = resized; uploadCompressFile.apply(scope); } }; reader.readAsArrayBuffer(file); } //压缩图片 function resizeMe(img, Orientation) { //压缩的大小 var max_width = 500; var max_height = 375; var iSxz = true; var canvas = document.createElement(‘canvas‘); var width = img.width; var height = img.height; if (width > height) { if (width > max_width) { height = Math.round(height *= max_width / width); width = max_width; } } else { if (height > max_height) { width = Math.round(width *= max_height / height); height = max_height; } } //跳转图片大小 if (Orientation == 6) { canvas.width = height; canvas.height = width; } else { canvas.width = width; canvas.height = height; } var ctx = canvas.getContext("2d"); //旋转图片 if (Orientation == 6) { ctx.save(); ctx.translate(height / 2, width / 2); ctx.rotate(90 * Math.PI / 180.0); ctx.drawImage(img, -width / 2, -height / 2, width, height); } else { ctx.drawImage(img, 0, 0, width, height); } //压缩率（返回base64编码） return canvas.toDataURL("image/png", 0.1); } //上传图片 function uploadCompressFile() { $.ajax({ type: "post", timeout: 80000, async: false, url: "../../FileUpload/FileImg", dataType: "text", data: { "BaseImg": newImg }, beforeSend: function (XMLHttpRequest) { }, success: function (msg) { if (msg != "") { var Image = "http://www.huiyexing.cn" + msg; //"http://hz.huiyexing.cn" + layer.closeAll(); $("#imgUpload").before("<img class=‘chuan NewImg‘ src=http://www.mamicode.com/‘" + Image + "‘ /><img class=‘del‘ src=http://www.mamicode.com/Resource/img/deldeldel.png‘ />") var Imglist = $("#ImgList").find(".NewImg"); if (Imglist.length == 9) { $("#imgUpload").hide(); } else { $("#imgUpload").show(); } $(".del").click(function () { $(this).prev().remove(); $(this).remove(); $("#imgUpload").show(); }); $("#fileToUpload").val(""); } }, complete: function (XMLHttpRequest, textStatus) { if (textStatus == ‘timeout‘) { //超时,status还有success,error等值的情况 layerPrompt("请求超时,请返回重试"); } }, error: function (err) { layerPrompt("数据加载失败"); } }); } //Add function AddCircle() { var Content = escape($("#textarea").val()); if (Content == "") { layerPrompt("请输入"); return; } var imgListUrl = ""; var imgList = $("#ImgList").find(".NewImg"); $(imgList).each(function () { imgListUrl += $(this).attr("src") + ","; }) if (imgListUrl != "") { imgListUrl = imgListUrl.substring(0, imgListUrl.length - 1); } $.ajax({ type: "POST", timeout: 80000, url: "../../Circle/AddCircle", dataType: "text", data: { "openid": openid, "Content": Content, "ContentImges": imgListUrl }, beforeSend: function (XMLHttpRequest) { }, success: function (msg) { if (msg == "true") { window.location.href = "Index.html"; } else { layerPrompt("操作失败"); } }, complete: function (XMLHttpRequest, textStatus) { if (textStatus == ‘timeout‘) { //超时,status还有success,error等值的情况 layerPrompt("请求超时,请返回重试"); } }, error: function (err) { layerPrompt("数据加载失败"); } }); } $("#Add").click(function () { AddCircle(); }) </script></body></html>
微信网页IOS上传图片旋转解决方案
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。