微信网页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 ...
随机推荐
- 【链表】Remove Duplicates from Sorted List II（三指针）
题目: Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct ...
- 工具类APP
应用名称 工具S 英文名称 未填写 应用描述 工具类APP 英文描述 未填写 应用官网 this 应用图标
- bzoj 5341: [Ctsc2018]暴力写挂
Description Solution 边分治+边分树合并 这个题很多做法都是启发式合并的复杂度的,都有点卡 以前有个套路叫做线段树合并优化启发式合并,消掉一个 \(log\) 这个题思路类似,建出 ...
- python3.3 unicode(encode&decode)
最近在用python写多语言的一个插件时,涉及到python3.x中的unicode和编码操作,本文就是针对编码问题研究的汇总,目前已开源至github.以下内容来自项目中的README. 1 ASC ...
- SQL语句的增删改查（详细）--转载
转载源: http://blog.csdn.net/a88055517/article/details/6736284/ 一.增:有2种方法 1.使用insert插入单行数据: 语法:insert [ ...
- npm saveError ENOENT: no such file or directory
1.报错情况 在执行npm install xxx时,出现如下:npm WARN saveError ENOENT: no such file or directory, open '/nodetes ...
- centos7安装 ftp 组件与开放防火墙端口命令
Linux 安装 ftp 组件 安装完后,有/etc/vsftpd/vsftpd.conf 文件,是 vsftp 的配置文件. 1.执行 yum -y install vsftpd 2. 添加一个 f ...
- 高并发第九弹:逃不掉的Map --> HashMap,TreeMap,ConcurrentHashMap
平时大家都会经常使用到 Map,面试的时候又经常会遇到问Map的,其中主要就是 ConcurrentHashMap,在说ConcurrentHashMap.我们还是先看一下, 其他两个基础的 Map ...
- Q：判断链表中是否存在环的相关问题
问题:如何判断一个单向链表中是否存在环? 例如: 链表中存在环(B-->D): <-- <--^ | | v | A-->B-->C-->D 链表中不存在环: A- ...
- Microservices与DDD的关系
Microservices(微服务架构)和DDD(领域驱动设计)是时下最炙手可热的两个技术词汇.在最近两年的咨询工作中总是会被不同的团队和角色询问,由此也促使我思考为什么这两个技术词汇被这么深入人心的 ...