收藏
回答

如何让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


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

11 个回答

  • 梦!
    梦!
    2020-05-07

    怎么裁剪呀,兄弟meng,关于识别不清楚的,我可以给你们一个建议,我们可以暗箱操作一波:先用模型判断图片是否在视窗内,当模型判断成功后,调用一下拍照接口,传给后端进行识别

    2020-05-07
    有用 1
    回复
  • 2019-05-22

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

    2019-05-22
    有用 1
    回复 15
    • 2019-05-22

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

      2019-05-22
      回复
    • Eric Huang
      Eric Huang
      2019-06-26回复

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

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

    请问有解决吗,现在还是不同设备,onCameraFrame 获取到的 frame 尺寸是不一样的,而且和 resolution 和 frame-size 设置不同的值有关系,不同的值也会有不同的 frame 尺寸。

    04-23
    有用
    回复
  • 阿白
    阿白
    2021-05-29

    所以这是个无疾而终的讨论?😂

    2021-05-29
    有用
    回复
  • 。。。
    。。。
    2021-02-22

    请问楼主问题最后解决了吗?


    2021-02-22
    有用
    回复
  • Ava
    Ava
    2020-08-07

    请问,最后大家到底是怎么解决的呢

    2020-08-07
    有用
    回复
  • 长衫造纸农
    长衫造纸农
    2019-08-14

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

    2019-08-14
    有用
    回复
  • 子康
    子康
    2019-08-07

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

    2019-08-07
    有用
    回复 6
    • 飘尘
      飘尘
      2020-01-08
      用upng.js对获取到的frame.data进行png编码,然后再去wx.arraybufferToBase64()就能获取正常的base64编码了
      2020-01-08
      1
      回复
    • Borago
      Borago
      2020-02-17回复飘尘
      你好,upng.js具体怎么弄呢?
      2020-02-17
      回复
    • Yang
      Yang
      2020-03-19回复飘尘
      试过了, 还是不行
      2020-03-19
      回复
    • 蒙太奇的大小伙子
      蒙太奇的大小伙子
      2020-05-12
      哥们,最后怎么解决的
      2020-05-12
      回复
    • 梦!
      梦!
      2020-07-01回复飘尘
      您好,您的方法ios上无效,也不是无效吧,就是有很奇怪的bug,我很懵逼,我有分享代码片段:https://developers.weixin.qq.com/s/xcBfZum37dih
      2020-07-01
      回复
    查看更多(1)
  • 狷介
    狷介
    2019-07-19

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

    2019-07-19
    有用
    回复
  • 等一个人[咖啡]
    等一个人[咖啡]
    2019-06-24

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

    2019-06-24
    有用
    回复 3
    • FQ
      FQ
      2020-06-24
      请问你实现了吗,我们现在在做这个功能,找了很多办法实现不了,想请教一下
      2020-06-24
      回复
    • Ava
      Ava
      2020-08-07
      同遇到
      2020-08-07
      回复
    • 四九
      四九
      2021-12-02
      同遇到,大家如果解决办法麻烦分享一下,谢谢
      2021-12-02
      回复

正在加载...

登录 后发表内容