直接上代码：

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("&timestamp=").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 接口的权限配置 和 照片上传和下载实现的更多相关文章

  1. 微信开发-业务域名、JS接口安全域名、网页授权域名

    在微信公众平台上可配置这些域名. 1.业务域名:在微信浏览器中点击文本框,会弹出下面的提示,很不爽,通过配置业务域名可以将该提示去掉 2.JS接口安全域名:分享到朋友圈(js-sdk)时用上,此接口要 ...

  2. 微信web开发的上传图片js接口

    $('.chooseImage').click(function(){ wx.chooseImage({ count: pic_num, // 默认9,大于9也是显示9 sizeType: ['com ...

  3. facebook页面种简单测试js调用flash开放的js接口的方法

    无意间折腾出来的,此方法很triky,但是很简单有效. 背景说明: facebook种内嵌的iframe无法直接访问. 解决方法: chrome浏览器为例 1.右键查看iframe源代码,此时进入if ...

  4. 微信JS接口

      微信JS接口 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置来源:http://www.cnblogs.com/txw1958/p/ ...

  5. android: 调用摄像头拍照

    很多应用程序都可能会使用到调用摄像头拍照的功能,比如说程序里需要上传一张图片 作为用户的头像,这时打开摄像头拍张照是最简单快捷的.下面就让我们通过一个例子来学 习一下,如何才能在应用程序里调用手机的摄 ...

  6. C#微信公众号开发系列教程六（被动回复与上传下载多媒体文件）

    微信公众号开发系列教程一(调试环境部署) 微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) C#微信公众号开发系列教程三(消息体签名及加解密) C ...

  7. 使用微信js接口的方法 ，以调用相机为例

    protected string GetTimeStamp_Str=""; protected string nonceStr_Str = ""; protec ...

  8. 微信JS接口汇总及使用详解

    这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...

  9. 微信分享JS接口失效说明及解决方案

    关键字:微信分享 JS 失效  分享到朋友圈 微信分享JS接口目前已失效,以前可以自定义分享的标题.描述.图片.链接地址在微信6.0.2版本中失效. 官方回复如下: 旧版的获取分享状态及设置分享内容的 ...

随机推荐

  1. [翻译]AKKA笔记 - CHILD ACTORS与ACTORPATH -6

    原文:http://rerun.me/2014/10/21/akka-notes-child-actors-and-path/ Actor是完全的继承结构.你创建的任何Actor肯定都是一个其他Act ...

  2. iOS--高级技术

    1.iOS---搜索功能 2.iOS--通讯录.蓝牙.内购.GameCenter.iCloud.Passbook等系统服务开发汇总 3.iOS-技巧性总结 4.iOS-调试技巧 5.iOS-即时通讯- ...

  3. SQL：插入指定标识列的数据时候的小错误

    异常处理汇总-数据库系列  http://www.cnblogs.com/dunitian/p/4522990.html 后期会在博客首发更新:http://dnt.dkill.net 好久没写标识系 ...

  4. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（12）-系统日志和异常的处理②

    系列目录 上一讲我们做了日志与异常的结果显示列表,这一节我们讲要把他应用系统中来. 首先我们在App.Common类库中创建一个通用类ResultHelper,这个类里面写了,获取一个GUID,获取当 ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统（47）-工作流设计-补充

    系列目录 补充一下,有人要表单的代码,这个用代码生成器生成表Flow_Form表的Index代码就可以 加上几个按钮就可以了 <div class="mvctool"> ...

  6. [C#] 走进异步编程的世界 - 剖析异步方法（上）

    走进异步编程的世界 - 剖析异步方法(上) 序 这是上篇<走进异步编程的世界 - 开始接触 async/await 异步编程>(入门)的第二章内容,主要是与大家共同深入探讨下异步方法. 本 ...

  7. 如何重置硬盘遭到“损坏”的Linux系统root用户密码

    传统印象下Linux是非常坚不可摧的,具有千年不更新,万年不重启的美名.而随着虚拟化的推进,很多跑在虚拟化上的Linux由于先前基础架构的脆弱,变得适应性“越来越不好”,体现在IP存储如果出现节点故障 ...

  8. 如何修复Windows 10 Enterprise 在9月更新后图片全部由绘图板打开的情况

    在进行了本月更新日的洗礼之后,企业版的Windows 10 突然发现无法好好的进行图片查看. 因为更新之前,各种图片都是使用“照片程序”打开的(这个是photos app),然后更新之后,这个app就 ...

  9. Core Java 总结（字符和字符串类问题）

    所有代码均在本地编译运行测试,环境为 Windows7 32位机器 + eclipse Mars.2 Release (4.5.2) 2016-10-17 整理 字符,字符串类问题 正则表达式问题 J ...

  10. 你真的会玩SQL吗？你所不知道的 数据聚合

    你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...