微信网页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='" + Image + "' /><img class='del' src='../../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上传图片旋转解决方案的更多相关文章
- IOS 中微信 网页授权报 key[也就是code]失效 解决办法
枪魂微信平台ios手机点击返回 网页授权失败,报key失效.已经解决,原因是授权key只能使用一次,再次使用就会失效. 解决办法:第一次从菜单中进行授权时,用session记录key和open_id. ...
- 微信网页授权，错误40163，ios正确，安卓错误？
2017-07-29:结贴昨天研究了半天,也没解决,看到出错的http头里面有PHPSESSID,回头去修改了一下程序里的session部分的代码(这部分代码在微信网页授权之后),,也不知道是腾讯那边 ...
- 手把手实现微信网页授权和微信支付，附源代码（VUE and thinkPHP）
wechat github 手把手实现微信网页授权和微信支付,附源代码(VUE and thinkPHP) 概述 公众号开发是痛苦的,痛苦在好多问题开发者文档是没有提到的,是需要你猜的. 在开发过程中 ...
- 微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法 （持续更新）
1.微信网页开发调用jssdk时报permission denied 大致是两个原因 (1)首先注册时未将你所调用的接口名字添加至jsApiList (2)第二个就是你的这个公众号没有权限使用这个ap ...
- 【腾讯Bugly干货分享】微信读书iOS性能优化
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/578c93ca9644bd524bfcabe8 “8小时内拼工作,8小时外拼成长 ...
- 利用fiddler和mock调试本地微信网页
利用fiddler和mock调试本地微信网页 微信公众号网页是比较特殊的页面,普通页面直接打开即可访问,但对于需要请求微信相关接口的部分需要安全域名认证.这导致了使用mock数据进行开发的页面没办法走 ...
- 调用微信JS-SDK接口上传图片
最近要在微信上做个问卷调查,有个上传图片功能,折腾找了半天资料,都不好弄,最终打算调用微信提供的上传图片接口,实现上传图片功能!此功能最大的好处是可以在微信服务器上暂存图片,减少本地服务器图片的缓存, ...
- JS微信网页使用图片预览（放大缩小）
前言 需求在微信网页中客户点击图片可进行预览放大缩小功能,网上找了各种js方式实现, 唯一的麻烦就是不兼容或者和项目框架不兼容 次函数只只用于部分客户端,否则会出现 WeixinJSBridge is ...
- 微信JS-SDK接口上传图片以及wx.config的配置
最近做的微信网页要实现一个上传图片的功能,倒腾了半天终于搞好了,具体的步骤可以查看微信官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_W ...
随机推荐
- SourceTree跳过Atlassian账号，免登陆，跳过初始设置
SourceTree 安装之后需要使用账号登陆以授权,并且是强制登陆. 登录过程非常漫长,并未在不FQ的情况下是不能成功的,下面记录一下跳过登录的方法. 装之后,转到用户本地文件夹下的 SourceT ...
- tomcat 日志详解
1 tomcat 日志详解 1.1 tomcat 日志配置文件 tomcat 对应日志的配置文件:tomcat目录下的/conf/logging.properties. tomcat 的日志等级有 ...
- koa2开发入门
一.koa2入门 1.创建koa2工程 首先,我们创建一个目录hello-koa并作为工程目录用VS Code打开.然后,我们创建app.js,输入以下代码: // 导入koa,和koa 1.x不同, ...
- 理解Spring定时任务的fixedRate和fixedDelay
用过 Spring 的 @EnableScheduling 的都知道,我们用三种形式来部署计划任务,即 @Scheduled 注解的 fixedRate(fixedRateString), fixe ...
- CSS3设置Table奇数行和偶数行样式
table:.myTable tr:nth-child(even){ //偶数行 background:#fff;}.myTable tr:nth-child(odd){ //奇数行 backgrou ...
- 【转】Js获取当前日期时间及其它操作
Js获取当前日期时间及其它操作 原文地址:http://www.cnblogs.com/carekee/articles/1678041.html var myDate = new Date();my ...
- 常用工具说明-- Intellij Idea生成JavaDoc
JavaDoc是一种将注释生成HTML文档的技术,生成的HTML文档类似于Java的API,易读且清晰明了.在简略介绍JavaDoc写法之后,再看一下在Intellij Idea 中如何将代码中的注释 ...
- HTML5的新结构标签
在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也 ...
- 多条件搜索问题 -sql拼接与参数化查询
来源:传智播客 免费开发视频. 问题:根据书名或出版社或作者查询书籍信息. using System; using System.Collections.Generic问题; using Syste ...
- input 控件监听回车确认按钮。
前端开发的同学捕捉回车按键经常会用到 if(event.keyCode == 13){ console.log("点击了回车按键");} 但是在微信上面,我们一般会用到指令 bin ...