如何将react-camera-pro拍摄的图片转换为字节数组？

首先，react-camera-pro的takePhoto()方法返回的是Data URL格式的图片字符串（比如data:image/png;base64,iVBORw0KGgo...），要转成字节数组（Uint8Array），可以按以下步骤实现：

实现思路 #

• 剥离Data URL的前缀，提取纯base64编码字符串
• 将base64字符串解码为二进制原始数据
• 把二进制数据转换为Uint8Array类型的字节数组

修改后的完整代码 #

import { useRef, useState } from 'react';
import { Camera } from 'react-camera-pro';
import Button from '你的Button组件路径';

function CameraComponent() {
  const camera = useRef(null);
  const [image, setImage] = useState(null);
  const [imageBytes, setImageBytes] = useState(null); // 存储转换后的字节数组

  const handleTakePhoto = () => {
    const photoDataUrl = camera.current.takePhoto();
    setImage(photoDataUrl); // 保留图片预览逻辑

    // 执行字节数组转换
    // 1. 拆分Data URL，获取base64部分
    const base64Content = photoDataUrl.split(',')[1];
    // 2. 解码base64为二进制字符串
    const binaryString = atob(base64Content);
    // 3. 转换为Uint8Array字节数组
    const byteArray = new Uint8Array(binaryString.length);
    for (let i = 0; i < binaryString.length; i++) {
      byteArray[i] = binaryString.charCodeAt(i);
    }
    setImageBytes(byteArray);
    console.log('转换后的字节数组:', byteArray);
  };

  return (
    <div>
      <Camera ref={camera} facingMode='environment' aspectRatio={1 / 1}/>
      <img src={image} alt='Taken photo' />
      <Button type='secondary' onClick={handleTakePhoto}>拍照</Button>
    </div>
  );
}

export default CameraComponent;

关键说明 #

• atob()是浏览器原生的base64解码函数，若在Node.js环境中，可替换为Buffer.from(base64Content, 'base64')来获取字节数据
• 最终得到的imageBytes就是标准的Uint8Array字节数组，可直接用于文件上传、本地存储等后续操作

内容的提问来源于stack exchange，提问作者Surbhi Jain