实现对接微信H5拍照或上传照片

一、准备

1.需要拥有微信公众号或使用测试的微信公众号。至于如何绑定在之前文章已有。

2.本文章讲的是调用微信接口。实现调用相机或相册的功能。

二、实现步骤

首先我们要获取到调用微信的接口的对应的一些数据。

这里我们用ajax调用后台来拿到。拿到后返回给前台进行接下来的调用。

调用后，拿到返回对应的图片的base64码，在进行保存或转存图。

三、代码实现

1.ajax调后台拿到初始化微信的参数

function installwx() {

拿到当前链接
    var url = location.href.split('#')[0];
    var signature, timestamp, nonceStr, appid;
    $.ajax({
        url: baselocation + "/weixin/ajax/camera",
        type: 'GET',
        data:{
            url: url
        },
        success: function (data) {
            if (data.success) {
                signature = data.entity.signature;
                timestamp = data.entity.timestamp;
                nonceStr = data.entity.nonceStr;
                appid = data.entity.appid;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: appid, // 必填，公众号的唯一标识
                    timestamp: timestamp, // 必填，生成签名的时间戳
                    nonceStr: nonceStr, // 必填，生成签名的随机串
                    signature: signature,// 必填，签名

//这里获取到微信的图片权限
                    jsApiList: ['chooseImage']
                });
            }
        },
        error: function (error) {
            console.log(error);
        }
    });
}

接下来我们写后台的逻辑

@RequestMapping("/weixin/ajax/camera")
@ResponseBody
public Map weixincamera(HttpServletRequest request) {
    Map json = new HashMap();
    try {
        Map<String, Object> weixinLogin = (Map<String, Object>)

        // 微信appid
        String appid = 这里写入自己的微信公众号的appid;
        // 微信secret
        String secret = 这里写入自己的微信公众号的secret;
        if (StringUtils.isNotBlank(appid) || StringUtils.isNotBlank(secret)) {
            // 初始化access_token
            String access_token = Convert.toStr(cache.get(token_key), null);
            //  获取URL 这里的URL指的是需要分享的那个页面地址,建议这里不要写成固定地址，而是获取当前地址.
            String url = request.getParameter("url");
            if (StringUtils.isBlank(access_token)) {
                // 创建通过Api获取Token的链接与参数
                String requestTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?";
                Map params = new HashMap();
                params.put("grant_type", "client_credential");
                params.put("appid", appid);
                params.put("secret", secret);
                String param = "grant_type=client_credential&appid=" + appid + "&secret=" + secret;
                Map<String, Object> jsonObjectToken = JsonUtil.json2Map(HttpUtil.doGet(requestTokenUrl, param));
                if (ObjectUtils.isNotNull(jsonObjectToken)) {
                    // 如果access_token 不为空
                    if (ObjectUtils.isNotNull(jsonObjectToken.get("access_token"))) {
                        // 获取Token值
                        access_token = (String) jsonObjectToken.get("access_token");
                        // 获取Token有效期值
                        int expires_in = (Integer) jsonObjectToken.get("expires_in");
                        cache.set(token_key, access_token, expires_in);
                    } else {
                        logger.error("微信拍照配置错误" + jsonObjectToken.get("errcode"));
                    }
                }
            }
            String ticket = Convert.toStr(cache.get(ticket_key), null);
            if (StringUtils.isBlank(ticket)) {
                String requestUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?";
                Map params = new HashMap();
                params.put("access_token", access_token);
                params.put("type", "jsapi");

                String param = "access_token=" + access_token + "&type=jsapi";
                // 获取凭证
                Map<String, Object> jsonObject = JsonUtil.json2Map(HttpUtil.doGet(requestUrl, param));
                if (ObjectUtils.isNotNull(jsonObject)) {
                    if ("ok".equals(jsonObject.get("errmsg"))) {
                        ticket = (String) jsonObject.get("ticket");
                        int expires_in = (Integer) jsonObject.get("expires_in");
                        cache.set(ticket_key, ticket, expires_in);
                    } else {
                        logger.error("微信拍照配置错误" + jsonObject.get("errcode"));
                    }
                }
            }

            String noncestr = UUID.randomUUID().toString();
            long timestamp = new Date().getTime() / 1000;
            String param = "jsapi_ticket=" + ticket + "&noncestr=" + noncestr + "×tamp=" + timestamp + "&url=" + url;
            String signature = SecureUtil.sha1(param);
            Map weixinShare = new HashMap();
            weixinShare.put("appid", appid);
            weixinShare.put("timestamp", timestamp);
            weixinShare.put("nonceStr", noncestr);
            weixinShare.put("signature", signature);
            json = setJson(true, null, weixinShare);
        } else {
            json = setJson(false, null, null);
        }
    } catch (Exception e) {
        e.printStackTrace();
         json = setJson(false, null, “获取报错！”);
    }
    return json;
}

获取之后接下来就可以前台调用微信调取摄像头和选择相片了

/**
 * 微信拍照
 */
function wxcamera() {
 
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 'compressed'是指缩略图，'original'是指原图。可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album','camera'], //'album'是指图片 'camera'是指相机 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                wx.getLocalImgData({
                    localId: localIds[0], // 图片的localID
                    success: function (res) {
                        var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                        var imageBase64 = '';
                        if (localData.indexOf('data:image') == 0) {
                            //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                            imageBase64 = localData;
                        } else {
                            //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                            //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                            imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
                        }
                       //这里imageBase64就是拿到最后的图片的base64的代码就可以进行转存图片或直接进行保存了。                    }
                });
            }
        });
    }

至此我们就可以了通过调用微信的接口进行拍照了。

四、总结

1. 这里调用微信拍照在使用测试微信公众号。可以使用http，但是线上为了确保功能请确保域名是https的。

2. 这里报错最多的是微信获取权限，因为有些公众号并为获得权限，所以请大家注意。