微信网页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 ...
随机推荐
- 为android游戏开发-准备的地图编辑器-初步刷地图
采用多文理混合,单页面支持8张文理进行刷绘
- C51单片机中data、idata、xdata、pdata的区别
C51单片机中data.idata.xdata.pdata的区别 data: 固定指前面0x00-0x7f的128个RAM,可以用acc直接读写的,速度最快,生成的代码也最小. idata: 固定指前 ...
- js便签笔记（1）——说说HTMLCollection、NodeList以及NamedNodeMap
介绍 在js的dom操作中,除了常用的document.html**Element之外,还有三个集合对象,即HTMLCollection.NodeList以及NamedNodeMap.试看以下操作: ...
- SpringMVC访问WEB-INF下的jsp的方法
当输入localhost:8080/项目名 浏览器弹出不知道神马错误 The absolute uri: http://java.sun.com/jsp/jstl/core cannot be res ...
- numpy.linalg.norm(求范数)
1.linalg=linear(线性)+algebra(代数),norm则表示范数. 2.函数参数 x_norm=np.linalg.norm(x, ord=None, axis=None, keep ...
- docker 安装集群管理工具 docker-compose
compose将管理的容器分为3层, 工程, 服务, 容器. 一个工程中可包含多个服务, 每个服务中定义容器运行的镜像参数, 依赖, 一个服务中科包含多个容器实力, 并没有解决负载均衡的问题 dock ...
- OOAD之单例模式Singleton的6种写法
1 主要作用是保证在Java应用程序中,一个类Class只有一个实例存在. 一 :第一种 饿汉式(预加载) public class Singleton { private Singleton(){ ...
- Major GC和Full GC的区别是什么？触发条件呢？
作者:RednaxelaFX链接:http://www.zhihu.com/question/41922036/answer/93079526来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非 ...
- 基于线程实现的生产者消费者模型(Object.wait(),Object.notify()方法)
需求背景 利用线程来模拟生产者和消费者模型 系统建模 这个系统涉及到三个角色,生产者,消费者,任务队列,三个角色之间的关系非常简单,生产者和消费者拥有一个任务队列的引用,生产者负责往队列中放置对象(i ...
- 阿里巴巴Java开发手册（详尽版）-个人未注意到的知识点(转)
转自 https://blog.csdn.net/u013039395/article/details/86528164 一.编程规约 (一) 命名风格 [强制]代码中的命名只可用英文方式 [强制]类 ...