关键词：小程序AR 图片 base64 相机 Camera onCameraFrame Canvas ArrayBuffer Uint8Array Uint8ClampedArray upng-js 核心步骤： 1 相机原始图像数据frame.data，即ArrayBuffer数组，转成Uint8Array数组 2 Uint8Array数组转成Uint8ClampedArray数组 3 wx.canvasPutImageData(Uint8ClampedArray) 详细流程如下： 最近因为项目需求，需要上传base64去做AR识别功能，和大家一起分享讨论下具体的实现方式。 首先说下实现原理，通过Camera的onCameraFrame获取实时帧数据，将实时帧数据添加到Canvas上，然后将Canvas保存为临时图片，再将临时图片转换为base64。 贴上核心实现代码： wxml： js： var nCounter = 0; openCamera: function (res) { var that = this var camera_ctx = wx.createCameraContext() listener = camera_ctx.onCameraFrame((frame) => { // nCounter等于30 是因为一开始相机会有一个对焦的过程，如果一开始获取数据，就是模糊的图片 if (nCounter == 30) { console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height) var data = new Uint8Array(frame.data); var clamped = new Uint8ClampedArray(data); // 实时帧数据添加到Canvas上 wx.canvasPutImageData({ canvasId: 'myCanvas', x: 0, y: 0, width: frame.width, height: frame.height, data: clamped, success(res) { // 转换临时文件 wx.canvasToTempFilePath({ x: 0, y: 0, width: frame.width, height: frame.height, canvasId: 'myCanvas', fileType: 'jpg', destWidth: frame.width, destHeight: frame.height, // 精度修改 quality: 0.8, success(res) { // 临时文件转base64 wx.getFileSystemManager().readFile({ filePath: res.tempFilePath, //选择图片返回的相对路径 encoding: 'base64', //编码格式 success: res => { // 保存base64 that.data.mybase64 = res.data; } }) }, fail(res) { console.log(res); } }, that) } }) } nCounter++ // console.log(nCounter); if (nCounter >= 100) { nCounter = 0 } }) listener.start() } 目前网上有两种转换方式并对比下： 1：upng-js等第三方转码js库，将相机流转换成base64，一般需要1-2s左右 [图片] 2.使用canvas将相机流转变base64，都是使用js或者小程序官方的api进行转换，一般转换时间在1秒以下： [图片] 重点说明下： 如何使用wx.canvasPutImageData()将相机流添加canvas，我们查看该官方api，添加的data类型为：Uint8ClampedArray [图片] 而我们通过onCameraFrame获取的data类型为：ArrayBuffer [图片] 所有两者类型不一致，就需要转换，将ArrayBuffer=>Uint8Array=>Uint8ClampedArray var data = new Uint8Array(frame.data); var clamped = new Uint8ClampedArray(data); 成功的把onCameraFrame获取实时帧数据转换并canvasPutImageData在canvas上，并通过canvasToTempFilePath获取临时文件，如何获取临时文件getFileSystemManager转换为base64，传入云端进行AR识别，就大功告成！ 技术分享来自于：北京晞翼科技有限公司 技术作者：le3d618、xiaoz0816 微信商务联系：le3d618

项目链接：https://github.com/94xy/miniprogram-privacy 效果预览： [图片] 使用方法： 1、复制项目 [代码]component[代码] 文件夹中的 [代码]privacy[代码] 文件夹到小程序项目中的组件目录； 2 、在 page.json 中引入组件 {   "usingComponents": {     "Privacy": "/component/privacy/privacy"   } } 3 、在 page.wxml 中使用组件，需要授权显示弹窗，不需要不显示 <Privacy /> 4 、可以在所有使用了隐私接口的页面都加上该组件，授权一次之后使用所有隐私接口不再需要授权 跳过阅读： 可以不阅读就点击“同意”按钮 <Privacy skipRead="{{true}}" /> 流程： 页面显示时使用 wx.getPrivacySetting 接口查询是否需要授权，需要授权则显示组件；用户点击“拒绝”直接退出小程序，用户点击“同意”关闭弹窗并同步给微信，之后可以正常使用所有隐私接口。 注意事项： 2023 年 9 月 15 号之前，默认不会启用隐私相关功能，所以检测不到需要弹窗的情况，可以在 app.json 中配置 "__usePrivacyCheck__": true 之后，接口才可以检测到是否需要弹窗。个人实际情况：我在开发者工具中配置了 "__usePrivacyCheck__": true ，needAuthorization 无论如何返回的都是 false，但在真机模拟的情况下可以返回 true自动打开隐私保护指引界面需在「小程序管理后台」配置《小程序用户隐私保护指引》，官方用户隐私保护指引填写说明。 取消授权： 微信中「微信下拉-最近-最近使用的小程序」中删除小程序可取消授权。 开发者工具中「清除模拟器缓存-清除授权数据」可取消授权。