微信公衆號調用攝像頭拍照和打開本地相冊上傳圖片至服務器

一、主體實現流程

1.引入Jquery和微信公衆號JS-SDK

2.調用【獲取臨時素材】downloadImage()接口（參數mediaId），拿到返回的圖片文件流(或其他格式的多媒體文件流)，保存到自己的服務器。

二、具體實現步驟

1.綁定域名

先登錄微信公衆平臺進入“公衆號設置”的“功能設置”裏填寫“JS接口安全域名”。

如果暫時沒有認證過的公衆號，可以通過這個微信鏈接去註冊一個測試公衆賬號，並配置JS接口安全域名，注意這裏配置的JS接口安全域名不帶http和www，格式比如 42du.net

測試公衆賬號申請地址 https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

微信公衆號調用攝像頭拍照和打開本地相冊上傳圖片至服務器

在本頁面還要配置一下微信認證網頁授權，注意授權回調頁面域名不帶http和www，格式比如 42du.net

微信公衆號調用攝像頭拍照和打開本地相冊上傳圖片至服務器

2.在需要調用攝像頭的頁面，引入JS文件

<!-- jquery 非必須 -->

<script src="/common/js/jquery-2.2.4.min.js"></script><script src="/common/js/bootstrap.min.js"></script><script src="/common/js/bootstrap-select.min.js"></script><script src="/common/js/i18n/defaults-zh_CN.min.js"></script><script src="/common/js/ajax.js"></script><script src="/common/js/jquery.form.min.js"></script><!--需要調用攝像頭--><script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

注意：微信官網給到的 是jweixin-1.4.0.js不穩定，親測不能用，jweixin-1.2.0.js可用

3.通過config接口注入權限驗證配置

<script type="text/javascript"> wx.config({ debug: true, appId:res.appId, // 必填，公衆號的唯一標識 timestamp: res.timestamp, // 必填，生成簽名的時間戳 nonceStr: res.noncestr, // 必填，生成簽名的隨機串 signature: res.signature,// 必填，簽名，見附錄1 jsApiList: ['chooseImage','uploadImage','previewImage','downloadImage']// 必填 }); </script>

4.JS-SDK使用權限簽名算法，生成第三步中 config接口所需參數

注意：java代碼使用springmvc框架，使用到的緩存、參數獲取等語法，開發者自適應修改。

獲取access_token（官方：有效期7200秒，開發者必須在自己的服務全局緩存access_token）、jsapi_ticket、簽名sign

/**

* create by guo bin hui in 2018-09-28

* 獲取jsp頁面調用微信公衆號js-sdk上傳圖片的config接口所需參數

*/

@RequestMapping(value = "/getWxConfig")

@ResponseBody

public Map getWxConfig(HttpSession seesion, HttpServletRequest request) throws IOException {

Map <String,String> map = new HashMap <String,String> ();

UserInfo user = (UserInfo)request.getSession().getAttribute("user");

String ticket = WeiXinUtil.getJsapiTicket(TEMP_ACCESS_TOKEN);

map.put("jsapi_ticket

查看原文 >>
相關文章