1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>分享</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  8.     <meta name="apple-mobile-web-app-capable" content="yes">
  9.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10.     <link rel="stylesheet" href="../../Resource/css/mui.min.css">
  11.     <script src="../../Resource/js/mui.min.js"></script>
  12.     <link href="../../Resource/layer_mobile/need/layer.css" rel="stylesheet" />
  13.     <script src="../../Resource/layer_mobile/layer.js"></script>
  14.     <script src="../../Resource/js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
  15.     <script src="../../Resource/js/exif.js"></script>
  16.     <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  17.     <script src="../../Resource/weixin/hyx_base.js"></script>
  18.     <script src="../../Resource/weixin/WeiXinShare.js"></script>
  19.     <style>
  20.         body {
  21.             background: #F5F5F5;
  22.         }
  23.  
  24.         .mui-content {
  25.             background: #f5f5f5;
  26.         }
  27.  
  28.         .mui-input-row {
  29.             margin-top: 10px;
  30.             background: #fff;
  31.             padding: 10px;
  32.         }
  33.  
  34.         textarea {
  35.             border: none;
  36.         }
  37.  
  38.         .chuan {
  39.             width: 50px;
  40.             height: 50px;
  41.         }
  42.  
  43.         .del {
  44.             position: relative;
  45.             top: -39px;
  46.             left: -14px;
  47.             width: 15px;
  48.         }
  49.  
  50.         footer {
  51.             position: fixed;
  52.             bottom: 0px;
  53.             color: #fff;
  54.             background: #01BF3A;
  55.             width: 100%;
  56.             padding: 12px 0px;
  57.             text-align: center;
  58.             font-size: 17px;
  59.             border-top: 1px solid #eee;
  60.         }
  61.     </style>
  62. </head>
  63.  
  64. <body>
  65.  
  66.     <div class="mui-input-row">
  67.         <textarea id="textarea" rows="5" placeholder="一起聊聊生活把"></textarea>
  68.     </div>
  69.     <div class="mui-input-row" id="ImgList">
  70.         <img class="chuan" id="imgUpload" src="../../Resource/img/shangcaun.png" />
  71.         <input type="file" id="fileToUpload" name="upfile" style=" display:none;" />
  72.     </div>
  73.     <footer id="Add">发送</footer>
  74.  
  75.     <script type="text/javascript">
  76.         var browser = {
  77.             versions: function () {
  78.                 var a = navigator.userAgent, b = navigator.appVersion;
  79.                 return {
  80.                     trident: a.indexOf("Trident") > -1, presto: a.indexOf("Presto") > -1,
  81.                     webKit: a.indexOf("AppleWebKit") > -1, gecko: a.indexOf("Gecko") > -1 && a.indexOf("KHTML") == -1,
  82.                     mobile: !!a.match(/AppleWebKit.*Mobile.*/), ios: !!a.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
  83.                     android: a.indexOf("Android") > -1 || a.indexOf("Linux") > -1, iPhone: a.indexOf("iPhone") > -1,
  84.                     iPad: a.indexOf("iPad") > -1, webApp: a.indexOf("Safari") == -1
  85.                 }
  86.             }(),
  87.             language: (navigator.browserLanguage || navigator.language).toLowerCase()
  88.         };
  89.  
  90.         var openid = getCookie("openid");
  91.         var fileUrl = "";
  92.         $(function () {
  93.             initJSAPI();
  94.             if (openid == undefined || openid == "" || openid == null || openid == "null") {
  95.                 var code = getQueryString("code");
  96.                 if (code == null) {
  97.                     JumpToOauth();
  98.                 } else {
  99.                     initOpenid(code);
  100.                 }
  101.             } else {
  102.                 GetUserInfo(openid);
  103.  
  104.             }
  105.  
  106.         });
  107.         function initOpenid(code) {
  108.             $.ajax({
  109.                 type: "POST",
  110.                 timeout: 80000,
  111.                 url: "../../GetJsApi/GetOpenid",
  112.                 dataType: "text",
  113.                 data: { "code": code },
  114.                 beforeSend: function (XMLHttpRequest) {
  115.  
  116.                 },
  117.                 success: function (msg) {
  118.                     //获取相应的值，并存放到cookie中去
  119.                     if (msg == undefined || msg.length == 0) {
  120.                     } else {
  121.                         openid = msg;
  122.                         setCookie("openid", msg, 1);
  123.                         GetUserInfo(openid);
  124.                     }
  125.                 },
  126.                 complete: function (XMLHttpRequest, textStatus) {
  127.                     if (textStatus == 'timeout') {
  128.                         //超时,status还有success,error等值的情况
  129.                         alert("请求超时,请返回重试");
  130.                     }
  131.                 },
  132.                 error: function (err) {
  133.                     console.log("数据加载失败");
  134.                 }
  135.             });
  136.         }
  137.         //获取微信用户是否关注公众号
  138.         function GetUserInfo(openid) {
  139.             $.ajax({
  140.                 type: "POST",
  141.                 timeout: 80000,
  142.                 url: "../../GetJsApi/WeChatIsFollow",
  143.                 dataType: "json",
  144.                 data: { "openid": openid },
  145.                 beforeSend: function (XMLHttpRequest) {
  146.  
  147.                 },
  148.                 success: function (msg) {
  149.                     if (msg[0].STATUS != "Y") {
  150.                         ShowQrcode();
  151.                     }
  152.                 },
  153.                 complete: function (XMLHttpRequest, textStatus) {
  154.                     if (textStatus == 'timeout') {
  155.                         //超时,status还有success,error等值的情况
  156.                         layerPrompt("请求超时,请返回重试");
  157.                     }
  158.                 },
  159.                 error: function (err) {
  160.                     layerPrompt("数据加载失败");
  161.                 }
  162.             });
  163.         }
  164.  
  165.         //上传图片
  166.         $("#imgUpload").click(function () {
  167.             $("#fileToUpload").click();
  168.  
  169.         })
  170.         window.setInterval(function () {
  171.             console.log($("#fileToUpload").val());
  172.             if (fileUrl != $("#fileToUpload").val()) {
  173.                 fileUrl = $("#fileToUpload").val();
  174.                 if (fileUrl != "" && fileUrl != undefined) {
  175.                     layer.open({
  176.                         type: 2,
  177.                         shadeClose: false,
  178.                         content: '正在上传...'
  179.                     });
  180.                     uploadBtnClick();
  181.                 }
  182.             }
  183.         }, 1000)
  184.  
  185.         /********************************
  186.         上传图片
  187.         */
  188.         function uploadBtnClick() {
  189.             var scope = this;
  190.             // change pic to base64
  191.             if (window.File && window.FileReader && window.FileList && window.Blob) {
  192.                 var filefield = document.getElementById('fileToUpload'),
  193.                     file = filefield.files[0];
  194.                 //IOS
  195.                 if (browser.versions.ios) {
  196.                     //获取图片的相关信息
  197.                     EXIF.getData(file, function () {
  198.                         EXIF.pretty(this);
  199.                         var Orientation = EXIF.getTag(this, 'Orientation');
  200.                         processfile(file, uploadCompressFile, scope, Orientation);
  201.                         alert(Orientation);
  202.                     });
  203.                     //Android
  204.                 } else if (browser.versions.android) {
  205.                     processfile(file, uploadCompressFile, scope, 1);
  206.                 }
  207.             } else {
  208.                 alert("此浏览器不完全支持上载图片");
  209.             }
  210.         }
  211.         function processfile(file, uploadCompressFile, scope, Orientation) {
  212.             var reader = new FileReader();
  213.             reader.onload = function (event) {
  214.                 var blob = new Blob([event.target.result]);
  215.                 window.URL = window.URL || window.webkitURL;
  216.                 var blobURL = window.URL.createObjectURL(blob);
  217.  
  218.                 var image = new Image();
  219.                 image.src = blobURL;
  220.                 image.onload = function () {
  221.                     var resized = resizeMe(image, Orientation);
  222.                     newImg = resized;
  223.                     uploadCompressFile.apply(scope);
  224.                 }
  225.             };
  226.             reader.readAsArrayBuffer(file);
  227.         }
  228.         //压缩图片
  229.         function resizeMe(img, Orientation) {
  230.             //压缩的大小
  231.             var max_width = 500;
  232.             var max_height = 375;
  233.             var iSxz = true;
  234.             var canvas = document.createElement('canvas');
  235.             var width = img.width;
  236.             var height = img.height;
  237.             if (width > height) {
  238.                 if (width > max_width) {
  239.                     height = Math.round(height *= max_width / width);
  240.                     width = max_width;
  241.                 }
  242.             }
  243.             else {
  244.                 if (height > max_height) {
  245.                     width = Math.round(width *= max_height / height);
  246.                     height = max_height;
  247.                 }
  248.             }
  249.             //跳转图片大小
  250.             if (Orientation == 6) {
  251.                 canvas.width = height;
  252.                 canvas.height = width;
  253.             } else {
  254.                 canvas.width = width;
  255.                 canvas.height = height;
  256.             }
  257.             var ctx = canvas.getContext("2d");
  258.             //旋转图片
  259.             if (Orientation == 6) {
  260.                 ctx.save();
  261.                 ctx.translate(height / 2, width / 2);
  262.                 ctx.rotate(90 * Math.PI / 180.0);
  263.                 ctx.drawImage(img, -width / 2, -height / 2, width, height);
  264.             } else {
  265.                 ctx.drawImage(img, 0, 0, width, height);
  266.             }
  267.             //压缩率（返回base64编码）
  268.             return canvas.toDataURL("image/png", 0.1);
  269.         }
  270.  
  271.         //上传图片
  272.         function uploadCompressFile() {
  273.             $.ajax({
  274.                 type: "post",
  275.                 timeout: 80000,
  276.                 async: false,
  277.                 url: "../../FileUpload/FileImg",
  278.                 dataType: "text",
  279.                 data: { "BaseImg": newImg },
  280.                 beforeSend: function (XMLHttpRequest) {
  281.                 },
  282.                 success: function (msg) {
  283.                     if (msg != "") {
  284.  
  285.                         var Image = "http://www.huiyexing.cn" + msg; //"http://hz.huiyexing.cn" +
  286.  
  287.                         layer.closeAll();
  288.                         $("#imgUpload").before("<img class='chuan NewImg' src='" + Image + "'  /><img class='del' src='../../Resource/img/deldeldel.png'  />")
  289.                         var Imglist = $("#ImgList").find(".NewImg");
  290.                         if (Imglist.length == 9) {
  291.                             $("#imgUpload").hide();
  292.                         } else {
  293.                             $("#imgUpload").show();
  294.                         }
  295.                         $(".del").click(function () {
  296.                             $(this).prev().remove();
  297.                             $(this).remove();
  298.                             $("#imgUpload").show();
  299.                         });
  300.                         $("#fileToUpload").val("");
  301.                     }
  302.                 },
  303.                 complete: function (XMLHttpRequest, textStatus) {
  304.                     if (textStatus == 'timeout') {
  305.                         //超时,status还有success,error等值的情况
  306.                         layerPrompt("请求超时,请返回重试");
  307.                     }
  308.                 },
  309.                 error: function (err) {
  310.                     layerPrompt("数据加载失败");
  311.                 }
  312.             });
  313.         }
  314.  
  315.         //Add
  316.         function AddCircle() {
  317.             var Content = escape($("#textarea").val());
  318.             if (Content == "") {
  319.                 layerPrompt("请输入");
  320.                 return;
  321.             }
  322.             var imgListUrl = "";
  323.             var imgList = $("#ImgList").find(".NewImg");
  324.             $(imgList).each(function () {
  325.                 imgListUrl += $(this).attr("src") + ",";
  326.             })
  327.             if (imgListUrl != "") {
  328.                 imgListUrl = imgListUrl.substring(0, imgListUrl.length - 1);
  329.             }
  330.             $.ajax({
  331.                 type: "POST",
  332.                 timeout: 80000,
  333.                 url: "../../Circle/AddCircle",
  334.                 dataType: "text",
  335.                 data: { "openid": openid, "Content": Content, "ContentImges": imgListUrl },
  336.                 beforeSend: function (XMLHttpRequest) {
  337.  
  338.                 },
  339.                 success: function (msg) {
  340.                     if (msg == "true") {
  341.                         window.location.href = "Index.html";
  342.                     } else {
  343.                         layerPrompt("操作失败");
  344.                     }
  345.                 },
  346.                 complete: function (XMLHttpRequest, textStatus) {
  347.                     if (textStatus == 'timeout') {
  348.                         //超时,status还有success,error等值的情况
  349.                         layerPrompt("请求超时,请返回重试");
  350.                     }
  351.                 },
  352.                 error: function (err) {
  353.                     layerPrompt("数据加载失败");
  354.                 }
  355.             });
  356.         }
  357.         $("#Add").click(function () {
  358.             AddCircle();
  359.         })
  360.     </script>
  361. </body>
  362.  
  363. </html>

微信网页IOS上传图片旋转解决方案的更多相关文章

  1. IOS 中微信 网页授权报 key[也就是code]失效 解决办法

    枪魂微信平台ios手机点击返回 网页授权失败,报key失效.已经解决,原因是授权key只能使用一次,再次使用就会失效. 解决办法:第一次从菜单中进行授权时,用session记录key和open_id. ...

  2. 微信网页授权，错误40163，ios正确，安卓错误？

    2017-07-29:结贴昨天研究了半天,也没解决,看到出错的http头里面有PHPSESSID,回头去修改了一下程序里的session部分的代码(这部分代码在微信网页授权之后),,也不知道是腾讯那边 ...

  3. 手把手实现微信网页授权和微信支付，附源代码（VUE and thinkPHP）

    wechat github 手把手实现微信网页授权和微信支付,附源代码(VUE and thinkPHP) 概述 公众号开发是痛苦的,痛苦在好多问题开发者文档是没有提到的,是需要你猜的. 在开发过程中 ...

  4. 微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法 （持续更新）

    1.微信网页开发调用jssdk时报permission denied 大致是两个原因 (1)首先注册时未将你所调用的接口名字添加至jsApiList (2)第二个就是你的这个公众号没有权限使用这个ap ...

  5. 【腾讯Bugly干货分享】微信读书iOS性能优化

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/578c93ca9644bd524bfcabe8 “8小时内拼工作,8小时外拼成长 ...

  6. 利用fiddler和mock调试本地微信网页

    利用fiddler和mock调试本地微信网页 微信公众号网页是比较特殊的页面,普通页面直接打开即可访问,但对于需要请求微信相关接口的部分需要安全域名认证.这导致了使用mock数据进行开发的页面没办法走 ...

  7. 调用微信JS-SDK接口上传图片

    最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存, ...

  8. JS微信网页使用图片预览（放大缩小）

    前言 需求在微信网页中客户点击图片可进行预览放大缩小功能,网上找了各种js方式实现, 唯一的麻烦就是不兼容或者和项目框架不兼容 次函数只只用于部分客户端,否则会出现 WeixinJSBridge is ...

  9. 微信JS-SDK接口上传图片以及wx.config的配置

    最近做的微信网页要实现一个上传图片的功能,倒腾了半天终于搞好了,具体的步骤可以查看微信官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_W ...

随机推荐

  1. 搭建安卓开发环境 hello world andriod

    万事开头能嘛.先要搭建开发环境,主要用到java,会java的同学福音啊. 一 相关下载 1.Jdk.(java的开发环境).  http://www.oracle.com/technetwork/j ...

  2. bug、兼容性、适配问题

    1.input   type=“number” 在火狐上限制长度会有问题: 1.maxlength 不管用 2.正则或js匹配限制长度后,给这个input赋值时候末尾三位(有可能是几位,我遇到的是三位 ...

  3. freeSWITCH之安装

    freeSWITCH 安装 官网教程 https://freeswitch.org/confluence/display/FREESWITCH/FreeSWITCH+First+Steps Windo ...

  4. linux svn 开机启动

    在/etc/init.d中建立svnboot,内容如下: #!/bin/bash if [ ! -f "/usr/bin/svnserve" ] then echo "s ...

  5. MVC中使用Castle.Windsor

    我在MVC中使用Castle.Windsor是这样用的. 首先在UI层安装Install Castle.Windsor 在App_Start中增加一个类WindsorActivator,用于注册和销毁 ...

  6. 使用DateTime的ParseExact方法实现特殊日期时间的方法详解（转）

    本篇文章是对使用DateTime的ParseExact方法实现特殊日期时间的方法进行了详细的分析介绍,需要的朋友参考下 今天遇到一个特别的需求,需要从下面的字符串中转换成一个DateTime对象: [ ...

  7. [转]Dotfuscator 使用图解教程

    本文转自:https://www.cnblogs.com/xiezunxu/articles/7228741.html Dotfuscator:是.NET混淆器和压缩器,它可以帮助您防止您的应用程序被 ...

  8. 基础拾遗----RabbitMQ

    基础拾遗 基础拾遗------特性详解 基础拾遗------webservice详解 基础拾遗------redis详解 基础拾遗------反射详解 基础拾遗------委托详解 基础拾遗----- ...

  9. MVC 之var与dynamic

    如果你用MVC写过程序,那么你应该知道ViewBag这个用于前后台的数据传递工具,那么你是否对ViewBag的用法感到过疑惑呢? ViewBag.Mode1l=new object(); ViewBa ...

  10. JS数组sort比较函数

    转载:http://www.cnblogs.com/ljchow/archive/2010/06/30/1768683.html 我们知道,数组的sort方法可以对数组元素进行排序,默认是按ASCII ...