### 需求背景在扫二维码的时候获取到结果并且拍照上传 ### wx.scanCode ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e31df31a54254c31b83746c4923d6893~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5o6Y6YeR55So5oi3ODk3Mg==:q75.awebp?rk3s=f64ab15b&x-expires=1766390572&x-signature=aLqhaRbt7nDi%2BhH8Ds2KIV%2FaRFE%3D) 微信小程序有提供扫码API，但是只能获取到结果，无法获取到图片 ### camera组件 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/acd5780caf144611a1cb2d1a08b3ca8b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5o6Y6YeR55So5oi3ODk3Mg==:q75.awebp?rk3s=f64ab15b&x-expires=1766390572&x-signature=X3vmo6ksdF4PsuXVMW4pscfMSxY%3D) camera组件提供了两种模式，相机、扫码模式。初步设想的方法是用扫码模式去扫码，在扫码获取到结果触发`bindscancode`回调的时候再去调用上下文对象去拍照片 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5334b1070a36485c9b2ca5c526b5d990~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5o6Y6YeR55So5oi3ODk3Mg==:q75.awebp?rk3s=f64ab15b&x-expires=1766390572&x-signature=Xu6wQ8iFOMggmEcs1a3wMcX6krE%3D) ```js Page({ // 拍照 takePhoto() { const ctx = wx.createCameraContext(); ctx.takePhoto({ quality: "low", success: (res) => { console.log(res.tempImagePath); }, fail: (err) => { console.log("拍照失败", err); }, }); }, // 获取到扫码结果 onGetCode(e) { console.log("获取到扫码结果", e.detail.result); this.takePhoto(); }, }); ``` 实测现在无法支持扫码模式下拍照`{errMsg: "Not allow to invoke takePhoto in 'scanCode' mode."}`，只能另做打算 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4ca20f2488f340d687f749577079f5a2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5o6Y6YeR55So5oi3ODk3Mg==:q75.awebp?rk3s=f64ab15b&x-expires=1766390572&x-signature=tdvAd7MlLIW%2BVPuXNHIY7gpPjOA%3D) 接下来试了前端来获取帧数据来解码，可以实现，但是准确度不高，效率不行。 ### 最终方案 `camera`扫码模式。获取到码结果之后立即获取当前帧并上传。 ```html ``` ```js Page({ onLoad() { // 帧数组 this.frameList = []; this.isEnd = false; // 相机上下文对象 this.cameraContext = wx.createCameraContext(); this.cameraListener = this.cameraContext.onCameraFrame((frame) => { // 存储一张帧图片 if (this.frameList.length === 0) { this.frameList.push({ data: frame.data, width: frame.width, height: frame.height, }); this.stopGetFrame(); } }); }, // 获取到扫码结果 onGetCode(e) { console.log("获取到扫码结果", e.detail.result); this.qrCodeResult = e.detail.result; if (this.frameList.length === 0 && !this.isEnd) this.startGetFrame(); }, // 开始获取帧图片 startGetFrame() { this.cameraListener.start(); }, // 停止监听帧数据 stopGetFrame() { this.cameraListener.stop(); this.transferFrame(); }, // frame转base64 frameToBase64(frameInfo) { const frameWidth = frameInfo.width; const frameHeight = frameInfo.height; return new Promise((resolve, reject) => { if (!frameInfo) { reject(new Error("No frame data available")); return; } // 创建离屏 canvas const offscreenCanvas = wx.createOffscreenCanvas({ type: "2d", width: frameWidth, height: frameHeight, }); const ctx = offscreenCanvas.getContext("2d"); // 创建 ImageData 对象 const imgData = ctx.createImageData(frameWidth, frameHeight); // 将 ArrayBuffer 数据复制到 ImageData const uint8Array = new Uint8Array(frameInfo.data); imgData.data.set(uint8Array); // 将 ImageData 绘制到 canvas ctx.putImageData(imgData, 0, 0); // 将 canvas 内容转换为 base64 const base64 = offscreenCanvas.toDataURL("image/png"); resolve(base64); }); }, // 去掉前缀 removeBase64Prefix(base64Data) { return base64Data.replace(/^data:image\/[a-z]+;base64,/, ""); }, // 处理帧数据 async transferFrame() { console.log("获取到帧数据", this.frameList); const fs = wx.getFileSystemManager(); let filePath = `${wx.env.USER_DATA_PATH}/example.png`; const base64 = this.removeBase64Prefix( await this.frameToBase64(this.frameList[0]) ); fs.writeFile({ filePath, encoding: "base64", data: base64, success: (res) => { console.log("写入成功", res); const eventChannel = this.getOpenerEventChannel(); eventChannel.emit("acceptDataFromB", { data: this.qrCodeResult, filePath, }); this.frameList = []; this.frameList.length = 0; this.isEnd = true; // 返回页面再上传文件 wx.navigateBack(); }, fail(err) { console.error("写入失败", err); this.frameList = []; this.frameList.length = 0; }, }); }, }); ``` ```html 扫码结果

``` ```js Page({ data: { filePath: "", }, goScan() { wx.navigateTo({ url: "../scan/index", events: { acceptDataFromB: (data) => { console.log("获取到的扫码结果:", data); // 上传图片... this.setData({ filePath:data.filePath }) }, }, }); }, }); ```