微信调用照相拍照等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("&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 是从微信服务器下载照片，保存到我们自己的服务器上。然后将我们自己服务器的地方返回给前端使用。

文章来源：http://www.cnblogs.com/digdeep/p/5743378.html

posted on 2017-09-12 07:45 bijian1013 阅读(586) 评论(0) 收藏举报

刷新页面返回顶部

bijian1013

微信调用照相拍照等js接口的权限配置和照片上传和下载实现

导航

公告