微信网页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 ...
随机推荐
- NiftyDialogEffects-多种弹出效果的对话框
感觉系统自带的对话框弹出太生硬?那就试试NiftyDialogEffects吧,类似于(Nifty Modal Window Effects),效果是模仿里面实现的 ScreenShot . . ...
- Eclipse及IDEA插件开发
https://github.com/eclipse/eclipse.jdt.ui http://www.eclipse.org/jdt/ui/ https://www.cnblogs.com/xin ...
- 数据分析--降维--LDA和PCA
一.因子分析 因子分析是将具有错综复杂关系的变量(或样本)综合为少数几个因子,以再现原始变量和因子之间的相互关系,探讨多个能够直接测量,并且具有一定相关性的实测指标是如何受少数几个内在的独立因子所支配 ...
- ls命令显示的total你知道代表着什么吗？
今天我无意间在用ls命令的时候发现显示的内容里的total,这个total代表着什么,引起了我的疑惑. 接下来开始解开它的神秘面纱. total后面的数字是指当前目录下所有文件所占用的空间总和,它是怎 ...
- 使用Pelican在Github(国外线路访问)和Coding(国内线路访问)同步托管博客
本文原文地址:使用Pelican在Github(国外线路访问)和Coding(国内线路访问)同步托管博客 介绍: Github Pages 禁用了百度爬虫,因此百度搜索引擎经常抓取不到在Github上 ...
- C和C++结构体的区别
C的结构体内不允许有函数存在,C++允许有内部成员函数,且允许该函数是虚函数.所以C的结构体是没有构造函数.析构函数.和this指针的. C的结构体对内部成员变量的访问权限只能是public,而C++ ...
- antlr4 接触
1. 配置IDE(可选) 2. 加减法示例 编写expr.g4 grammar AddMinus; expr: Minus Number #minusNum | expr op=('+'|'-') e ...
- Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in E:\\PHP\\wamp\\www\\lsr\\lsr.php on line 42
类似于这样的错误: 其实大多数的情况下,都是SQL语句书写错了,特别是这种情况: select * from order; 应该写成: select * from `order`;(那不是单引号,而是 ...
- 剑指offer64:滑动窗口的最大值
题目描述: 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值分别为{4,4, ...
- Beta阶段——Scrum 冲刺博客第三天
一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 实现部分question页面的制作,制作内容包括题目序号的制作,同时在最后 ...