微信小程序3.3.5 获取摄像头实时帧并存储到临时文件目录，查看临时文件目录图片

page({
    onLoad(){
        // 获取camera上下文
        const context = wx.createCameraContext();
        // 定义回调函数
        const CamFramCall = (frame)=>{
            // 获取画布对象，'#mycanvas'是<canvas>标签的ID
            const query = wx.createSelectorQuery()
            query.select('#mycanvas')
            .fields({node:true,size:true})
            .exec((res)=>{
                const canvas=res[0].node
                const ctx=canvas.getContext('2d')
                // 定义画布宽高等于帧图像的宽高
                canvas.width=frame.width
                canvas.height=frame.height
                // 把帧数据原格式（ArrayBuffer）转Uint8ClampedArray
                var ImgU8Array = new Uint8ClampedArray(frame.data);
                // 创建imageData对象
                var imageData=ctx.createImageData(canvas.width,canvas.height)
                // 将帧数据填充到imageData中
                for(var i=0;i<ImgU8Array.length;i+=4){
                    imageData.data[0+i]=ImgU8Array[i+0]
                    imageData.data[1+i]=ImgU8Array[i+1]
                    imageData.data[2+i]=ImgU8Array[i+2]
                    imageData.data[3+i]=ImgU8Array[i+3]
                }
                // 将imageData绘制到canvas中
                ctx.putImageData(imageData,0,0,0,0,canvas.width,canvas.height)
                // 将画布上的内容保存到临时路径
                wx.canvasToTempFilePath({
                    canvas:canvas,
                    // 如果调用该API成功就执行success函数
                    success(res) {
                        // 预览图片
                        wx.previewImage({
                        urls: [res.tempFilePath],
                        })
                    },
                    // 如果调用该API失败，打印错误信息
                    fail(res){console.log(res)}
                },this)
            listener.stop()
        }

        // 配置监听回调函数
        const listener = context.onCameraFrame(CamFramCall);
        // 开启监听
        listener.start()
    }
})