公告列表
公告列表
收藏
回答

如何让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
    回复 14
    • 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
      赞
      回复
    查看更多(9)
  • 八角楼
    八角楼
    2天前

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

    2天前
    有用
    回复
  • W
    W
    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
      赞
      回复

正在加载...

请 登录 后发表内容
相关问题
相关文档