微信jssdk实现人脸拍照的代码和出现错误解决

jssdk官方文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

微信测试公众号申请：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

微信测试公众号配置：

前端代码：  需要导入js,具体步骤，注释都在文档有，下面直接贴代码

<script>

    var images = {
        localId: [],
        imageBase64:[],
        imageArray:[]
    };
    
    $(function(){
        get_wx_config();
    })

    var configTrue = false; //用来确定是否微信配置是否已经完成 
    function get_wx_config(){
        $.ajax({      //异步发送请求到controller
            url:"${basePath}/gjj/face/getWxConfig/${gjjUserInfo.wxAppId}",
            dataType:"json",
            type:"post",  
            data: {url: location.href.split('#')[0]}, // 当前页面的url链接，一次配置，后面可多次调用接口
            success:function(res){
                wx.config({    //成功返回配置相关信息
                    //debug: true,
                    appId:"${gjjUserInfo.wxAppId!''}",   //appid 需要在公众号中生成的
                    timestamp: res.timestamp,    
                    nonceStr: res.nonceStr,    
                    signature: res.signature,  //通过appid 获取timestamp
                    jsApiList:  
  ['chooseImage','uploadImage','previewImage','downloadImage','getLocalImgData']  //需要调用微信的那些接口，需要在这里申请
                });
                wx.ready(function(){
                    configTrue =true;   
                    //成功以后做相关操作
                })
                wx.error(function(res){
                    alert(res.errMsg);
                });
            },
            error:function(){
                alert("微信配置失败");
            }
        })
    }

    var num = 0;
    //拍照方法   
    function take_a_photo(){
        if(!configTrue){
            return;  //判断是否配置成功
        } 
        wx.chooseImage({  //选择照片
            count: 1, // 微信默认9
            sizeType: ['compressed'], //压缩图
            sourceType: ['camera'],  //应该是不能支持相册的  album
            success: function (res) {
                var singleIma = res.localIds[0];
                images.localId.push(singleIma);  //返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                //这个localId其实就是一个微信自己定义的HASH变量，例如wxlocalresource://imageid987654321123456789，在微信浏览器中，它会自动解析成对应的图片
                // 遍历每一个人localId, 得到获取base64
                wx.getLocalImgData({    //通过localId获取base64数据
                    localId: singleIma, 
                    success: function (res) {
                        var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                        // ios转换图片和安卓不同 
                        if (localData.indexOf("data:image/jgp;base64,") != -1) {
                            localData = localData.replace("data:image/jgp;base64,", "data:image/jpg;base64,");
                        }
                        //为了让照片可以返现，必须加头部信息
                        if (localData.indexOf("data:image/jpg;base64,") == -1){
                            localData = "data:image/jpg;base64,"+localData.replace(/\n/g, '');
                        }
                        images.imageBase64.push(localData);
                    },
                    fail: function(res) {
                        alert(res.errMsg);
                    }
                });

            },
            fail:function(res){
                alert("失败的原因:"+res.errMsg);
            }
        })
    }

    //需要上传到服务器，并通过getLocalImgData， 遍历每一个人localId, 得到获取base64
    var indexImage=0;
    function uploadImages(){
        //防止重复提交
        $(".btn").addClass("disables").removeAttr("onclick");

        if(images.imageBase64.length<3){
            return;
        }
        var imageBase = images.imageBase64[indexImage];
        $.ajax({
            type: "POST",
            url: "${basePath}/gjj/face/sendBase64",
            data: {imgBase64:imageBase},
            dataType: "json",
            success: function (res) {
                if(res.code=="000"){
                    if(indexImage==2){
                        sendBase64ToCollection(images.imageBase64);
                    }else{
                        indexImage++;
                        uploadImages();
                    }
                }else{
                    alert("人脸验证第"+(indexImage+1)+"张:"+res.msg);
                    indexImage=0;
                    errAdd();
                }
            },
            error:function(res){
                alert("验证人脸："+res.errMsg);
                indexImage=0;
                errAdd();
            }
        });

    }

    function  sendBase64ToCollection(imageList){
        //是否有人脸信息
        var hasface ="${gjjUserInfo.hasface!''}"; //1-有 0-没有
        if("1"== hasface){  //新增人脸
            $.ajax({
                type: "POST",
                url: "${basePath}/gjj/face/sendBase64ToUpdate/${gjjUserInfo.yhmkUserId}",
                data: {imageList:JSON.stringify(imageList)}, //将多张人脸信息发送到后台
                dataType: "json",
                success: function (res) {
                    if(res.code=="000"){
                        window.location.href = "${basePath}/gjj/face/goFaceLogin";
                    }else{
                        alert("人脸更新:"+res.msg);
                        indexImage=0;
                        errAdd();
                    }
                },
                error:function(res){
                    alert("更新人脸："+res.msg);
                    errAdd();
                }
            });
        }else{  //更新人脸
            $.ajax({
                type: "POST",
                url: "${basePath}/gjj/face/sendBase64ToCollection/${gjjUserInfo.yhmkUserId}",
                data: {imageList:JSON.stringify(imageList)},
                dataType: "json",
                success: function (res) {
                    if(res.code=="000"){
                        window.location.href = "${basePath}/gjj/face/goFaceLogin";
                    }else{
                        alert("人脸采集:"+res.msg);
                        indexImage=0;
                        errAdd();
                    }
                },
                error:function(res){
                    alert("采集人脸："+res.msg);
                    errAdd();
                }
            });
        }
    }

    //防止重复提交
    function errAdd(){
        $(".btn").removeClass("disables").attr("onclick","uploadImages()");
    }

</script>

后台代码：

第一步:获取token

token = wechatPub.getSecret(); //获取到微信公众号的secret
String requestUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET".replace("APPID",  appid).replace("APPSECRET", token);   //获取连接
String json = WeixinUtil.httpRequest(requestUrl, "GET", (String)null); //通过get的方式发送请求
if (null != json) {
    accessToken = (AccessToken)JSON.parseObject(json, AccessToken.class); //拿到返回值，取出token
} else {
    LOGGER.error("获取accesstoken失败：微信公众号服务网络访问失败");
    accessToken.setErrcode("-2");
    accessToken.setErrmsg("https request error");
}

第二步：获取ticket

AccessToken accessToken = this.getAccessTokenFromWX(appid); //上一步获取到token
String ticketUrl = "";
 
ticketUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi".replace("ACCESS_TOKEN", accessToken.getAccess_token());
               
String jsonObject = WeixinUtil.httpRequest(ticketUrl, "GET", (String)null);
if (StringUtils.isNotBlank(jsonObject)) {
        weChatTicket = (WeChatTicket)JSON.parseObject(jsonObject, WeChatTicket.class);
}

其他几个参数：

UUID.randomUUID().toString();  //生成随机签名的字符串

Long.toString(System.currentTimeMillis() / 1000); //时间戳

第三步：签名的生成

//注意这里参数名必须全部小写，且必须有序
temp = "jsapi_ticket=" + jsapi_ticket +
         "&noncestr=" + nonce_str +
         "&timestamp=" + timestamp +
         "&url=" + url;

MessageDigest crypt = MessageDigest.getInstance("SHA-1"); //加密
crypt.reset();
crypt.update(temp.getBytes("UTF-8"));
signature = byteToHex(crypt.digest());

ret.put("url", url);
ret.put("jsapi_ticket", jsapi_ticket);
ret.put("nonceStr", nonce_str);
ret.put("timestamp", timestamp);
ret.put("signature", signature);

至此，微信配置需要用到的后台参数都已经得到！

微信拍照等功能也可以正常使用