EasyAR 小程序AR

帮助您迅速在微信小程序中实现扫描识别图呈现3D动画模型、视频、图片、文字、UI按钮等效果，并且支持3D模型交互。区别于原生 AR 应用，具有模式轻、部署快、传播性强等特点。

EasyAR WebAR 微信小程序快速入门

一、开发前准备

登录小程序后台，在【设置-开发设置-开发者ID】中，获取AppID，如下图：
登录 EasyAR 官网购买WebAR云识别图库，并获取Cloud Key和Token：
在“云识别管理”进入云识别图库的管理页面，获取Cloud Key
在“API KEY”进入API KEY的管理页面，获取Token。如有有效期需求选择有效期后生成Token

二、开发步骤

1. wxml文件中添加camera和canvas组件。camera组件用于展示相机内容和获取相机帧，canvas组件用于图片压缩。

2. 初始化camera和canvas

const query = wx.createSelectorQuery();
query.select('#capture')
    .fields({node: true})
    .exec((res) => {
        const canvas = res[0].node;
        //设置canvas内部尺寸为480*640，frame-size="medium"的设置下相机帧大多是480*640
        canvas.width = 480;
        canvas.height = 640;
        this.canvas = canvas;
    });

let cameraContext = wx.createCameraContext();
let listener = cameraContext.onCameraFrame(frame => {
    if (!this.canvas) return;
    let canvas = this.canvas;
    //如果尺寸不匹配，就修改canvas尺寸以适应相机帧
    if (canvas.width !== frame.width || canvas.height !== frame.height) {
        canvas.width = frame.width;
        canvas.height = frame.height;
    }

    //TODO 在这里保存frame对象，以便在需要的时候进行下一步压缩图片、发起CRS请求。不要在onCameraFrame回调中直接处理。
});
listener.start();

3. 压缩图片为JPEG（在需要发起一次CRS请求时进行第3、4步，比如用户主动触发一次识别时，或者已经开始识别循环时。不要在onCameraFrame回调中直接发起）

let context = this.canvas.getContext('2d');
let ctxImageData = context.createImageData(frame.width, frame.height);
ctxImageData.data.set(new Uint8ClampedArray(frame.data)); //复制相机帧内容到imageData
context.putImageData(ctxImageData, 0, 0); //将imageData画到canvas上
let dataUrl = this.canvas.toDataURL("image/jpeg", 0.7); //使用toDataURL方法将相机帧压缩为JPEG，质量70%
let base64 = dataUrl.substr(23); //去除dataURL头，留下文件内容的base64

4. 组装请求参数，发起CRS请求

const params = {
    image: base64,
    notracking: "true",
    appId: "开发前准备中的 Cloud Key",
};

return new Promise((resolve, reject) => {
    wx.request({
        url: "https://cn1-crs.easyar.com:8443/search/",
        method: 'post',
        data: params,
        header: {
            'Authorization': "开发前准备中的 Token",
            'content-type': 'application/json'
        },
        success: res => resolve(res.data), //处理方法见下
        fail: err => reject(err),
    });
});

5. 处理请求结果

queryImage(frame).then(response => { //response为上面的res.data
    let result = response && response.result;
    if (!result) return;

    if (result.target) {
        console.log("识别成功", result.target.targetId);
        //小程序可以根据targetId获知识别到了哪一张图，进而进行判断或触发事件等，也可以对每张图配置meta信息，根据meta信息来进行操作

        if (result.target.meta) { //读取识别图meta的base64(meta在上传识别图时配置)
            console.log("meta base64:", result.target.meta);
        }
    } else {
        console.log("识别失败", result.message);
    }
});

三、后续工作

完整示例：点击查看
将 https://cn1-crs.easyar.com:8443/ 加入小程序域名白名单的request部分
在图库中添加识别图
根据实际需求处理CRS请求的内容，如展示图片、视频、3D模型等
可以通过自建服务器，在服务器端调用接口的方式获取Token，发送给小程序端使用，而不是将Token写死在小程序代码中

EasyAR 小程序AR

EasyAR WebAR 微信小程序 快速入门

一、开发前准备

二、开发步骤

三、后续工作

EasyAR WebAR 微信小程序快速入门