微信调用照相拍照等 js 接口的权限配置 和 照片上传和下载实现
直接上代码：
1. 前端调试代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>调用微信相机</title>
<link rel="stylesheet" href="css/weui.min.css"/>
</head>
<body>
<br/><br/>
<div>
<div class="hd">
<h1 class="page_title" ><span id="current_user"></span></h1>
</div>
<br/>
<div class="page slideIn button">
<div class="bd spacing">
<br/><br/><br/><br/>
<a class="weui_btn weui_btn_primary" href="javascript:;" onclick="take_a_photo()">调用微信相机</a>
</div>
</div>
</div> <br/><br/><br/><br/>
<div>
appId:<span id="appId"></span><br/>
timestamp:<span id="timestamp"></span><br/>
nonceStr:<span id="nonceStr"></span><br/>
jsapi_ticket:<span id="jsapi_ticket"></span><br/>
signature:<span id="signature"></span><br/> originalStr:<span id="originalStr"></span><br/>
scan_result:<span id="result"></span><br/>
</div> <script type='text/javascript' src='js/jquery.min.js'></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="js/weixin_util.js"></script>
<script type="text/javascript">
// 通过config接口注入权限验证配置
$(function(){
debugger;
get_wx_config();
}) function get_wx_config(){
debugger;
//url（当前网页的URL，不包含#及其后面部分）
var url = window.location.href.split('#')[0];
var indata = {"url":url};
//$.post("http://wwww.axxx.cn/xxx/weixin/getConfigInfo.json", indata, function(data){
$.post("http://localhost:8080/xxx/weixin/getConfigInfo.json", indata, function(data){
debugger;
if(data.rs == 'f'){
alert("系统错误");
}else{
var result = data.body;
$("#appId").text(result.appId);
$("#timestamp").text(result.timestamp);
$("#nonceStr").text(result.nonceStr);
$("#jsapi_ticket").text(result.jsapi_ticket);
$("#signature").text(result.signature);
$("#originalStr").text(result.originalStr); //步骤三：通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: result.appId, // 必填，公众号的唯一标识
timestamp: result.timestamp, // 必填，生成签名的时间戳
nonceStr: result.nonceStr, // 必填，生成签名的随机串
signature: result.signature,// 必填，签名，见附录1
jsApiList: ["chooseImage", "previewImage", "uploadImage", "downloadImage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
// 基本思路是，上传图片到微信服务器->下载多媒体接口讲图片下载到服务器->返回服务器存储路径->前台显示
}); // 步骤四：通过ready接口处理成功验证
wx.ready(function(){
alert("wx.config success.");
}); wx.error(function(res){
alert("wx.config failed.");
//alert(res);
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，
// 也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
}); // {"errMsg":"config:invalid signature"}
}
},'json');
} // 图片接口
// 拍照、本地选图
var images = {
localId: [],
serverId: []
}; // 拍照或者选择照片
function take_a_photo(){
wx.chooseImage({
count: 1, // 默认9，这里每次只处理一张照片
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
images.localId = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片 var i = 0, length = images.localId.length;
function upload() {
wx.uploadImage({
localId: images.localId[i],
success: function(res) {
i++;
alert('已上传：' + i + '/' + length);
images.serverId.push(res.serverId); // res.serverId 就是 media_id，根据它去微信服务器读取图片数据：
var indata = {"media_id":res.serverId};
$.post("/weixin/getPhoto.json", indata, function(data){
if(data.rs == 'f'){
alert("系统错误");
}else{
alert(data.body); // 返回 图片在我们自己的服务器的url
}
},'json'); if (i < length) {
upload();
}
},
fail: function(res) {
alert(JSON.stringify(res));
}
});
}
upload();
}
});
}
</script>
</body>
</html>
前端这里
var url = window.location.href.split('#')[0];
是比较容易犯错的地方。
2. 后端接口：
@NoLogin
@RequestMapping(value="/getConfigInfo.json", method=RequestMethod.POST)
@ResponseBody
public Object getConfigInfo(String url) throws NoSuchAlgorithmException{
String noncestr = "dsfww";
JsapiTicket ticket = AccessTokenJsapiTicketThread.getTicket(); logger.debug("ticket::::::;" + JSON.toJSONString(ticket));
System.out.println("ticket::::::;" + JSON.toJSONString(ticket)); if(ticket != null){
long timestamp = new Date().getTime();
StringBuilder sb = new StringBuilder("jsapi_ticket=");
sb.append(ticket.getTicket()).append("&noncestr=").append(noncestr)
.append("×tamp=").append(timestamp).append("&url=").append(url); MessageDigest md = MessageDigest.getInstance("SHA-1");
// 对接后的字符串进行sha1加密
byte[] digest = md.digest(sb.toString().getBytes());
String signature = SignUtil.byteToStr(digest).toLowerCase(); Map<String, String> map = new HashMap<String, String>();
map.put("jsapi_ticket", ticket.getTicket());
map.put("appId", WxPayConfPub.APPID);
map.put("timestamp", String.valueOf(timestamp));
map.put("nonceStr", noncestr);
map.put("signature", signature);
map.put("originalStr", sb.toString());
logger.debug(JSON.toJSONString(map));
System.out.println(JSON.toJSONString(map));
return JsonConvertor.convertSuccessResult(map);
} return JsonConvertor.convertFailResult(ErrorCodeEnum.SYSTEM_ERROR);
} @NoLogin
@RequestMapping(value="/getPhoto.json", method=RequestMethod.POST)
@ResponseBody
public Object getPhoto(String media_id) throws NoSuchAlgorithmException{
//http请求方式: GET,https调用
// var url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID";
AccessToken token = AccessTokenJsapiTicketThread.accessToken;
String url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=" + token.getAccess_token() + "&media_id=" + media_id;
HttpsURLConnection httpsUrl = null;
InputStream inputStream = null;
Date now = new Date();
String saveFileName = null;
try {
httpsUrl = HttpUtil.initHttpsConnection(url, "GET");
int responseCode = httpsUrl.getResponseCode();
if (responseCode == 200) {
// 从服务器返回一个输入流
inputStream = httpsUrl.getInputStream(); byte[] data = new byte[1024];
int len = 0;
FileOutputStream fileOutputStream = null; saveFileName = DateUtil.convertYMDH(now) + RandomStringUtils.random(6, true, true) + ".jpg";; // 绝对路径
String path = imageRootPath + DateUtil.convertYMD(now) + "/" + saveFileName; File dir = new File(imageRootPath + DateUtil.convertYMD(now) + "/");
if (!dir.exists()) {
FileUtils.forceMkdir(dir);
} try {
fileOutputStream = new FileOutputStream(path);
while ((len = inputStream.read(data)) != -1) {
fileOutputStream.write(data, 0, len);
}
fileOutputStream.flush();
} catch (IOException e) {
e.printStackTrace();
} finally {
if (inputStream != null) {
try {
inputStream.close();
} catch (IOException e) {
}
}
if (fileOutputStream != null) {
try {
fileOutputStream.close();
} catch (IOException e) {
}
}
}
}
} catch (IOException e) {
e.printStackTrace();
}
// 返回图片路径
return JsonConvertor.convertSuccessResult(DateUtil.convertYMD(now) + "/" + saveFileName);
}
/getConfigInfo.json 接口是配置 jsapi 权限认证。
/getPhoto.json 是从 微信服务器下载照片，保存到我们自己的服务器上。然后将我们自己服务器的地方返回给前端使用。
微信调用照相拍照等 js 接口的权限配置 和 照片上传和下载实现的更多相关文章
- 微信开发-业务域名、JS接口安全域名、网页授权域名
在微信公众平台上可配置这些域名. 1.业务域名:在微信浏览器中点击文本框,会弹出下面的提示,很不爽,通过配置业务域名可以将该提示去掉 2.JS接口安全域名:分享到朋友圈(js-sdk)时用上,此接口要 ...
- 微信web开发的上传图片js接口
$('.chooseImage').click(function(){ wx.chooseImage({ count: pic_num, // 默认9,大于9也是显示9 sizeType: ['com ...
- facebook页面种简单测试js调用flash开放的js接口的方法
无意间折腾出来的,此方法很triky,但是很简单有效. 背景说明: facebook种内嵌的iframe无法直接访问. 解决方法: chrome浏览器为例 1.右键查看iframe源代码,此时进入if ...
- 微信JS接口
微信JS接口 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置来源:http://www.cnblogs.com/txw1958/p/ ...
- android: 调用摄像头拍照
很多应用程序都可能会使用到调用摄像头拍照的功能,比如说程序里需要上传一张图片 作为用户的头像,这时打开摄像头拍张照是最简单快捷的.下面就让我们通过一个例子来学 习一下,如何才能在应用程序里调用手机的摄 ...
- C#微信公众号开发系列教程六（被动回复与上传下载多媒体文件）
微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...
- 使用微信js接口的方法 ，以调用相机为例
protected string GetTimeStamp_Str=""; protected string nonceStr_Str = ""; protec ...
- 微信JS接口汇总及使用详解
这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...
- 微信分享JS接口失效说明及解决方案
关键字:微信分享 JS 失效 分享到朋友圈 微信分享JS接口目前已失效,以前可以自定义分享的标题.描述.图片.链接地址在微信6.0.2版本中失效. 官方回复如下: 旧版的获取分享状态及设置分享内容的 ...
随机推荐
- hibernate多对一单向关联
关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...
- MySQL有趣的查询方式
背景介绍 美国大选开始了,国防部要求我对两个总统候选人的票数进行统计.我首先简单的进行一次无条件查询,了解了一下表格的结构及所有数据长什么样子. select * from foo 查询到的结果令我很 ...
- 05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...
- 【Win 10应用开发】自定义浮动层——Flyout
最近几天总是下雨,真是“何处秋窗无雨声”,也“不知风雨几时休”. 好,进入正题. 弹出层有三种. 第一种是ContentDialog,即内容对话框,它其实类似于模态对话框,弹出后会覆盖整个窗口区域,并 ...
- 堆排序与优先队列——算法导论(7)
1. 预备知识 (1) 基本概念 如图,(二叉)堆是一个数组,它可以被看成一个近似的完全二叉树.树中的每一个结点对应数组中的一个元素.除了最底层外,该树是完全充满的,而且从左向右填充.堆的数组 ...
- 2. SVM线性分类器
在一个线性分类器中,可以看到SVM形成的思路,并接触很多SVM的核心概念.用一个二维空间里仅有两类样本的分类问题来举个小例子.如图所示 和是要区分的两个类别,在二维平面中它们的样本如上图所示.中间的直 ...
- boost::function的用法
本片文章主要介绍boost::function的用法. boost::function 就是一个函数的包装器(function wrapper),用来定义函数对象. 1. 介绍 Boost.Func ...
- 网络爬虫: 从allitebooks.com抓取书籍信息并从amazon.com抓取价格(2): 抓取allitebooks.com书籍信息及ISBN码
这一篇首先从allitebooks.com里抓取书籍列表的书籍信息和每本书对应的ISBN码. 一.分析需求和网站结构 allitebooks.com这个网站的结构很简单,分页+书籍列表+书籍详情页. ...
- 图标字体 VS 雪碧图——图标字体应用实践
本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生 ...
- angular2 问题请教
angular2 通过http服务进行对后端api的远程调用? 我简单的尝试了一下,发现了几个问题,记录一下,以方便查找问题. angular2 http服务的跨域问题?跨域本身就是一个很复杂的问题, ...