height 微信小程序无效_微信小程序AR解决方案 | 微信开放社区

最新推荐文章于 2024-03-31 23:21:28 发布

贾秋

最新推荐文章于 2024-03-31 23:21:28 发布

阅读量251

点赞数

文章标签： height 微信小程序无效

本文链接：https://blog.csdn.net/weixin_29890403/article/details/112429950

版权

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 = ();
('#capture')
    .fields({node: true})
    .exec((res) => {
        const canvas = res[0].node;
        
         = 480;
        canvas.height = 640;
        this.canvas = canvas;
    });

let cameraContext = ();
let listener = (frame => {
    if (!this.canvas) return;
    let canvas = this.canvas;
    if ( !== frame.width || canvas.height !== ) {
         = frame.width;
        canvas.height = ;
    }

    
});
();

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

let context = this.canvas.getContext('2d');
let ctxImageData = (frame.width, );
(newUint8ClampedArray()); 
(ctxImageData, 0, 0); let dataUrl = this.canvas.toDataURL("image/jpeg", ); let base64 = (23);

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

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

returnnewPromise((resolve, reject) => {
    ({
        url: "",
        method: 'post',
        data: params,
        header: {
            'Authorization': "开发前准备中的 Token",
            'content-type': 'application/json'
        },
        success: res => resolve(), fail: err => reject(err),
    });
});

5. 处理请求结果

queryImage(frame).then(response => { let result = response && response.result;
    if (!result) return;

    if () {
        console.log("识别成功", .targetId);
        if (.meta) { console.log("meta base64:", .meta);
        }
    } else {
        console.log("识别失败", );
    }
});