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

camera 相机回调后的数据如何存储为图片？

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug Camera 工具 7.0.5 2.7.4


获取 Camera 实时帧数据frame.data

const listener = context.onCameraFrame((frame) => {
  console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)


})


这个frame.data类型是ArrayBuffer 

data    ArrayBuffer 图像像素点数据，一维数组，每四项表示一个像素点的 rgba

如何将这个数据存储成一个图片？


尝试使用下面的java代码解析无法打开

Path path = Paths.get(fileDest);
Files.write(path, bFile);


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

4 个回答

  • 小帅丶
    小帅丶
    2023-11-13

    感谢楼主的Java代码。

    wx.arrayBufferToBase64 已弃用

    可以考虑安装 base64-arraybuffer 并引入使用encode即可

    const { encode } = require("base64-arraybuffer")

      onLoad() {
    //创建camera
    var ctx = wx.createCameraContext()
    const listener = ctx.onCameraFrame((frame) => {
      console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)
      // 构建要传递的 JSON 数据  
      const data = {
        base64: wx.arrayBufferToBase64(frame.data),//此方法已弃用
        width:frame.width,
        height:frame.height,
        tag: '小帅',
      };
      // 将 JSON 数据转换为字符串  
      const jsonData = JSON.stringify(data);
      wx.request({
        url: '',
        method: 'POST',
        data: jsonData, // 传递 JSON 数据  
        header: {
          'Content-Type': 'application/json'
        },
        success: (res) => {
          console.info(res)
        }
      })
    })
    listener.start()
  },
    2023-11-13
    有用 1
    回复
  • myf
    myf
    2019-07-16

    在后台用java保存了图片

    public static void readRawImage(byte[] bgraPixelData, int width, int height, String path) throws IOException {
         //4通道
         int samplesPerPixel = 4;
         // rgba order
         int[] bandOffsets = {0, 1, 2, 3};
     
         //byte[] bgraPixelData = new byte[width * height * samplesPerPixel];
     
         DataBuffer buffer = new DataBufferByte(bgraPixelData, bgraPixelData.length);
         WritableRaster raster = Raster.createInterleavedRaster(buffer, width, height, samplesPerPixel * width, samplesPerPixel, bandOffsets, null);
         ColorModel colorModel = new ComponentColorModel(ColorSpace.getInstance(ColorSpace.CS_sRGB), true, false, Transparency.TRANSLUCENT, DataBuffer.TYPE_BYTE);
     
         BufferedImage image = new BufferedImage(colorModel, raster, colorModel.isAlphaPremultiplied(), null);
     
         ImageIO.write(image, "PNG", new File(path));
     
     }


    2019-07-16
    有用 1
    回复 1
    • 蒙太奇的大小伙子
      蒙太奇的大小伙子
      2020-05-11
      前端怎么实现的呀，直接传frame.data吗
      2020-05-11
      赞
      回复
  • Kevin
    Kevin
    2019-12-15

    请问如何保存为图片解决了吗

    2019-12-15
    有用
    回复
  • Yrobot
    Yrobot
    2019-07-16

    利用小程序前端即可实现。


    利用wxAPI将arraybuffer转为base64：https://developers.weixin.qq.com/miniprogram/dev/api/base/wx.arrayBufferToBase64.html


    利用

    wx.getFileSystemManager().writeFileSync()将base64存为本地文件即可


    2019-07-16
    有用
    回复 2
    • Kevin
      Kevin
      2019-12-15
      var fm = wx.getFileSystemManager();
      var cameraListener = cc.onCameraFrame(function(frame) {
      var u8ca = new Uint8ClampedArray(frame.data);
      var base64 = wx.arrayBufferToBase64(u8ca);
      var writeFileSync = fm.writeFileSync(filePath, base64, 'base64');


      var u8a = new Uint8Array(frame.data);
      var base64 = wx.arrayBufferToBase64(u8a);
      var writeFileSync = fm.writeFileSync(filePath, base64, 'base64');
      }）
      将这两种方式的base64保存为文件上传到服务器发现打不开，请问这种转换方式是有什么问题吗
      2019-12-15
      赞
      回复
    • 菩提树下
      菩提树下
      2020-06-23
      因为camera拿到的数据是没有经过编码的图片源数据，所以你专程base64后不是图片，你需要对frame.data进行处理，这里有段代码可以参考一下


      var upng = require('upng-js');
      let data = upng.encode([frame.data], frame.width, frame.height, 0)
      const base64 = 'data:image/png;base64,' + wx.arrayBufferToBase64(data)
      2020-06-23
      赞
      回复
请 登录 后发表内容
相关文档