收藏
回答

如何让onCameraFrame 获取的frame数据与相机控件显示范围一致

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug CameraContext.onCameraFrame 客户端 7.0.4 2.7.0
<!--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


回答关注问题邀请回答
收藏

6 个回答

  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    2019-05-22

    麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    2019-05-22
    赞同
    回复 1
  • .
    .
    2019-05-22

    一样的问题,而且 安卓frame.data  生成的图片是拉伸过的,Iphone的生成的图片是正常的

    2019-05-22
    赞同 1
    回复 11
    • .
      .
      2019-05-22

      安卓的图片被横向拉伸了,感觉是宽高写反了@那个很帅的小白

      2019-05-22
      回复
    • 小程序技术专员-Eric
      小程序技术专员-Eric
      2019-06-26回复.

      这个问题在新版 7.0.5 已经修复

      2019-06-26
      回复
    • 吃包子不吐包子皮
      吃包子不吐包子皮
      2019-07-13回复小程序技术专员-Eric
      mi5 安卓7.0 微信7.0.5 , 这个问题还存在,frame 大小只和设置的 frame-size 有关,和显示区域对不上,而且 没有办法事先获取到这个帧大小
      2019-07-13
      回复
    • 小程序技术专员-Eric
      小程序技术专员-Eric
      2019-07-22回复吃包子不吐包子皮
      相机显示的尺寸是经过裁剪的,onCameraFrame 返回的是未裁剪过的。如果需要对准的话,可以用等比缩放的方式来裁剪 camera frame。
      2019-07-22
      回复
    • 吃包子不吐包子皮
      吃包子不吐包子皮
      2019-07-23回复小程序技术专员-Eric
      哦,原来这样,关于裁剪策略的说明有吗? 感觉不是中心点对齐裁剪,可能是底边对齐?
      2019-07-23
      回复
    查看更多(6)
  • 长衫造纸农
    长衫造纸农
    2019-08-14

    我也遇到同样的问题,图片拉伸严重,拿去识别图中文字识别率特别低。老哥解决了吗,怎么解决的来着?

    2019-08-14
    赞同
    回复
  • 子康
    子康
    2019-08-07

    我也用到了这个功能,但是我的程序一直都是失败的,根本获取不到能使用的base64编码,有没有其他的获取base64的方法啊

    2019-08-07
    赞同
    回复 3
    • lyn
      lyn
      01-08
      用upng.js对获取到的frame.data进行png编码,然后再去wx.arraybufferToBase64()就能获取正常的base64编码了
      01-08
      回复
    • Borago
      Borago
      02-17回复lyn
      你好,upng.js具体怎么弄呢?
      02-17
      回复
    • Yang
      Yang
      03-19回复lyn
      试过了, 还是不行
      03-19
      回复
  • 狷介
    狷介
    2019-07-19

    你好,我也遇到了同样的问题,会不会是基础库版本的原因呢?真机的基础库和开发者工具是不一样的,并且开发者工具上只有最新的基础库版本可以正常使用oncameraframe

    2019-07-19
    赞同
    回复
  • houl
    houl
    2019-06-24

    现在使用CameraFrameListener 获取frame.data ,实现类似AI识别功能实现了吗

    2019-06-24
    赞同
    回复
登录 后发表内容