Java：
import com.phpdragon.wechat.proxy.config.WeChatConfig;import lombok.extern.slf4j.Slf4j;import me.chanjar.weixin.common.bean.WxJsapiSignature;import me.chanjar.weixin.common.error.WxErrorException;import me.chanjar.weixin.mp.api.WxMpService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.*;@Slf4j@RequestMapping("/system/")@RestControllerpublic class SystemController { @Autowired private WeChatConfig weChatConfig; /** * 获取JsSDK配置参数 * 参考：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62 * * @param appId * @param currentUrl * @return * @throws WxErrorException */ @CrossOrigin @PostMapping("/getJsSdkConfig") public WxJsapiSignature getJsSdkConfig(@RequestParam("app_id") String appId, @RequestParam("current_url") String currentUrl) throws WxErrorException { WxMpService wxMpService = weChatConfig.getWxMpService(appId); return wxMpService.createJsapiSignature(currentUrl); }}
JS:
代码参考: Java微信公众平台开发(十一)--微信JSSDK中Config配置
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width" /><title>JsSDK配置参数获取Demo</title><script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script><script> //用于JS调试 var vConsole = new VConsole(); //初始化</script> --><script type="text/javascript"> function getUrlParameter(name){ name = name.replace(/[]/,"\[").replace(/[]/,"\[").replace(/[]/,"\\\]"); var regexS = "[\\?&]"+name+"=([^&#]*)"; var regex = new RegExp( regexS ); var results = regex.exec(window.parent.location.href ); if( results == null ) return ""; else { return results[1]; } }; function jssdk() { $.ajax({ url : "https://www.phpdragon.com/system/getJsSdkConfig", type : ‘post‘, //contentType: "application/json", dataType : ‘json‘, data : { ‘current_url‘ : location.href.split(‘#‘)[0], ‘app_id‘: getUrlParameter("app_id") }, async:true, success : function(rsp) { wx.config({ debug : true, appId : rsp.appId, timestamp : rsp.timestamp, nonceStr : rsp.nonceStr, signature : rsp.signature, jsApiList : [ ‘checkJsApi‘, ‘onMenuShareTimeline‘, ‘onMenuShareAppMessage‘, ‘onMenuShareQQ‘, ‘onMenuShareWeibo‘, ‘hideMenuItems‘, ‘showMenuItems‘, ‘hideAllNonBaseMenuItem‘, ‘showAllNonBaseMenuItem‘, ‘translateVoice‘, ‘startRecord‘, ‘stopRecord‘, ‘onRecordEnd‘, ‘playVoice‘, ‘pauseVoice‘, ‘stopVoice‘, ‘uploadVoice‘, ‘downloadVoice‘, ‘chooseImage‘, ‘previewImage‘, ‘uploadImage‘, ‘downloadImage‘, ‘getNetworkType‘, ‘openLocation‘, ‘getLocation‘, ‘hideOptionMenu‘, ‘showOptionMenu‘, ‘closeWindow‘, ‘scanQRCode‘, ‘chooseWXPay‘, ‘openProductSpecificView‘, ‘addCard‘, ‘chooseCard‘, ‘openCard‘ ] }); }, error : function(data){ alert("获取JsSDK参数异常:" + data); } }); } function isWeiXin5() { var ua = window.navigator.userAgent.toLowerCase(); var reg = /MicroMessenger\/[5-9]/i; return reg.test(ua); } $(function(){ jssdk(); }); function takePicture(){ wx.chooseImage({ count: 1, // 默认9 sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图，默认二者都有 sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { wx.uploadImage({ localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得 isShowProgressTips: 1, // 默认为1，显示进度提示 success: function (res) { var mediaId = res.serverId; // 返回图片的服务器端ID，即mediaId //将获取到的 mediaId 传入后台 方法savePicture $.post("<%=request.getContextPath()%>/savePicture",{mediaId:mediaId},function(res){ if(res.t == ‘success‘){ }else{ alert(res.msg) } }) }, fail: function (res) { alertModal(‘上传图片失败，请重试‘) } }); }, fail: function (res) { alertModal(‘上传图片失败，请重试2‘) }, error: function (res) { alertModal(‘上传图片失败，请重试3‘) } }); } function checkJsApifunction () { wx.checkJsApi({ jsApiList: [ ‘getNetworkType‘, ‘previewImage‘, "chooseImage", "openLocation", "getLocation", ], success: function (res) { alert(JSON.stringify(res)); } }); } </script></head><body> <button onclick="takePicture()">拍照</button></body></html>
效果：
PS：
JAVA 微信公众号调用摄像头并上传图片至服务器
微信jssdk实现人脸拍照的代码和出现错误解决
公众号开发文档wiki
Java开发微信公众号之整合weixin-java-tools框架开发微信公众号
从零实现 Spring Boot 2.0 整合 weixin-java-mp(weixin-java-tools) 获取 openId，用于微信授权
Spring MVC 实现的公众号 Demo：GitHub、码云Spring Boot 实现的公众号 Demo（支持多公众号）：GitHub、码云
