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

实现对接微信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图片路径就完美生成赋值到imgsrc中了
                            imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
                        }
                       //这里imageBase64就是拿到最后的图片的base64的代码就可以进行转存图片或直接进行保存了。                    }
                });
            }
        });
    }

 

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

 

 

四、总结

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

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


热门文章
1
Java实现html页面抓取转PDF
1335浏览 2021-04-13 17:09
2
通过微信接口获取code
1317浏览 2021-04-14 09:26
3
vue 页面按钮点击复制内容
1285浏览 2021-04-21 09:42
4
Mysql常用sql语句
1281浏览 2021-04-20 10:46
5
对接父子级数据的添加或修改逻辑
1277浏览 2021-04-21 09:47
6
Linux安装中文字体
1178浏览 2021-04-13 17:14
7
vue中数组去重的实现
1114浏览 2021-04-14 09:20
8
Nginx如何配置重定向
1105浏览 2021-04-14 09:09
9
合并单元格的方法
1104浏览 2021-04-14 09:23
10
邀请函│EICD2021中国民办教育大会
944浏览 2021-03-15 14:06