- 如何让onCameraFrame 获取的frame数据与相机控件显示范围一致
[代码]<!--index.wxml-->[代码][代码]<view class=[代码][代码]"page"[代码][代码]>[代码][代码] [代码][代码]<camera device-position=[代码][代码]"back"[代码] [代码]flash=[代码][代码]"off"[代码] [代码]binderror=[代码][代码]"error"[代码] [代码]frame-size=[代码][代码]"large"[代码] [代码]class=[代码][代码]"mycamera"[代码][代码]>[代码][代码] [代码][代码]</camera>[代码][代码] [代码][代码]<canvas canvas-id=[代码][代码]"mycanvas"[代码] [代码]class=[代码][代码]"mycanvas"[代码][代码]> </canvas>[代码][代码]</view>[代码] [代码]/**index.wxss**/[代码] [代码]page{[代码][代码] [代码][代码]width: 100%;[代码][代码] [代码][代码]height: 100%;[代码][代码]}[代码] [代码].mycamera{[代码][代码] [代码][代码]top:0px;[代码][代码] [代码][代码]width: 100%;[代码][代码] [代码][代码]height: 50%;[代码][代码] [代码][代码]position: fixed;[代码][代码]}[代码] [代码].mycanvas{[代码][代码] [代码][代码]top:50%;[代码][代码] [代码][代码]width: 100%;[代码][代码] [代码][代码]height: 100%;[代码][代码] [代码][代码]background-color: black;[代码][代码] [代码][代码]position: fixed;[代码][代码]}[代码] [代码]//index.js[代码][代码]//获取应用实例[代码][代码]const app = getApp()[代码] [代码]var[代码] [代码]nCounter = 0[代码][代码]var[代码] [代码]listener[代码] [代码]Page({[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]},[代码] [代码] [代码][代码]onLoad: [代码][代码]function[代码] [代码]() {[代码][代码] [代码][代码]},[代码] [代码] [代码][代码]onReady: [代码][代码]function[代码] [代码](res) {[代码][代码] [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码] [代码][代码]var[代码] [代码]camera_ctx = wx.createCameraContext() [代码][代码] [代码][代码]listener = camera_ctx.onCameraFrame((frame) => { [代码][代码] [代码][代码]if[代码] [代码](nCounter == 0) {[代码][代码] [代码][代码]wx.canvasPutImageData({[代码][代码] [代码][代码]canvasId: [代码][代码]'mycanvas'[代码][代码],[代码][代码] [代码][代码]x: 0,[代码][代码] [代码][代码]y: 0,[代码][代码] [代码][代码]width: frame.width,[代码][代码] [代码][代码]heihgt: frame.heihgt,[代码][代码] [代码][代码]data: [代码][代码]new[代码] [代码]Uint8ClampedArray(frame.data),[代码][代码] [代码][代码]success(res) {[代码][代码] [代码][代码]console.log([代码][代码]'OK'[代码][代码])[代码][代码] [代码][代码]},[代码][代码] [代码][代码]fail(res) {[代码][代码] [代码][代码]console.log([代码][代码]'FAIL'[代码][代码])[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}[代码][代码] [代码][代码]nCounter++[代码][代码] [代码][代码]if[代码] [代码](nCounter >= 10) {[代码][代码] [代码][代码]nCounter = 0[代码][代码] [代码][代码]}[代码][代码] [代码][代码]})[代码][代码] [代码][代码]listener.start()[代码][代码] [代码][代码]}[代码] [代码]})[代码]- 当前 Bug 的表现(可附上截图) 上面为相机控件显示的内容,下面为canvas显示onCameraFrame获取的frame数据,可见内容并不一致,主要表现是图像显示内容的范围不一致 [图片] - 预期表现 - 复现路径 - 提供一个最简复现 Demo
2019-05-22 - onCameraFrame如何让原始帧裁剪后与camera区域一致?
onCameraFrame如何让原始帧裁剪后与camera区域一致,并且兼容安卓和ios等不同机型和系统?
2019-07-31