微信公众平台使用JS-SDK实现拍照上传功能

微信浏览器无法使用调用相机功能（坑~/(ㄒoㄒ)/~~），本文使用微信公众平台jsjdk实现拍照上传图片功能。

众所周知，调用微信平台接口最大的诟病就是麻烦、流程多，什么token、code、ticket、签名等等。本次就js-sdk的拍照上传功能做一次梳理。最好的方式是阅读官方文档。

js-sdk文档地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

流程：

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
引入JS文件 http://res.wx.qq.com/open/js/jweixin-1.6.0.js
获取access_token access_token获取文档
拿着access_token 获取 jsapi_ticket
拿着jsapi_ticket、一个随机串noncestr、一个时间戳timestamp、当前的url 去生成签名signature
拿着signature 进行config接口注入权限验证配置。
通过ready接口处理成功验证，验证成功，我们可以开始调用微信js-sdk的接口了。

获取access_token

GET请求

参数: 你的微信平台后台的 appid 和 secret ，grant_type默认填写client_credential即可

GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

获取jsapi_ticket

GET请求

参数：使用上一步获得的access_token

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

生成signature

签名算法

签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

即signature=sha1(string1)。

示例：

String str ="jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value";String signature = sha1(str); // 0f9de62fce790f9a083d5c99e95740ceb90c27ed

Java版生成sha1算法代码：

    /*** sha1加密** @param data* @return* @throws NoSuchAlgorithmException*/public String sha1(String data) throws NoSuchAlgorithmException {//信息摘要器      算法名称MessageDigest md = MessageDigest.getInstance("SHA1");//把字符串转为字节数组byte[] b = data.getBytes();//使用指定的字节来更新我们的摘要md.update(b);//获取密文  （完成摘要计算）byte[] b2 = md.digest();//获取计算的长度int len = b2.length;//16进制字符串String str = "0123456789abcdef";//把字符串转为字符串数组char[] ch = str.toCharArray();//创建一个40位长度的字节数组char[] chs = new char[len * 2];//循环20次for (int i = 0, k = 0; i < len; i++) {byte b3 = b2[i];//获取摘要计算后的字节数组中的每个字节// >>>:无符号右移// &:按位与//0xf:0-15的数字chs[k++] = ch[b3 >>> 4 & 0xf];chs[k++] = ch[b3 & 0xf];}//字符数组转为字符串return new String(chs);}

config接口注入权限验证配置

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: ['chooseImage'] // 必填，需要使用的JS接口列表  chooseImage为拍照接口
});

ready接口处理成功验证

wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。alert("wx ready.");
});

弹出wx ready. 说明配置成功。

调用拍照接口

调用接口需要在config配置时添加自己需要的接口，如拍照接口 chooseImage

wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片}
});

拍照、上传、下载、获取本地图片接口

这里的上传仅仅只返回图片服务器端ID，继续调用下载，获取本地图片接口才可得到图片的base64数据，完整代码：

// 调用微信文件或相机，并上传图片function wxCamera() {wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片// 上传图片接口wx.uploadImage({localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {var serverId = res.serverId; // 返回图片的服务器端ID// 下载图片接口wx.downloadImage({serverId: serverId, // 需要下载的图片的服务器端ID，由uploadImage接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {var localId = res.localId; // 返回图片下载后的本地ID// 获取本地图片接口wx.getLocalImgData({localId: localId, // 图片的localIDsuccess: function (res) {var localData = res.localData; // localData是图片的base64数据，可以用img标签显示dealImage(localData ); //处理图片}});}});}});}});}

到此，微信公众号的一个拍照上传功能终于完成了。