React+TypeScript手写拍照上传

以下是一个使用React和TypeScript实现的简单的拍照上传功能的示例代码：

import React, { useState } from 'react';
import { Button, Input } from 'antd';
 
interface Props {
  // 上传图片的方法，需要在父组件中实现
  uploadImage: (image: Blob) => void;
}
 
const CameraUpload: React.FC<Props> = ({ uploadImage }) => {
  const [imageSrc, setImageSrc] = useState<string>('');
 
  const takePhoto = async () => {
    try {
      const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
      const video = document.createElement('video');
      video.srcObject = mediaStream;
      video.play();
 
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const ctx = canvas.getContext('2d');
      if (!ctx) {
        throw new Error('Canvas context error');
      }
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
 
      const image = canvas.toDataURL('image/png');
      setImageSrc(image);
 
      const blob = await fetch(image).then(r => r.blob());
      uploadImage(blob);
    } catch (error) {
      console.error('Error while taking photo:', error);
    }
  };
 
  return (
    <div>
      <Button onClick={takePhoto}>拍照</Button>
      {imageSrc && <img src={imageSrc} alt="Uploaded Image" />}
    </div>
  );
};
 
export default CameraUpload;

在这个例子中，我们创建了一个名为CameraUpload的React组件，它使用TypeScript作为类型系统。它有一个uploadImage属性，这个方法需要在使用该组件的父组件中实现。takePhoto方法负责捕获图片，将其转换为Blob，并在成功后调用uploadImage方法。这个例子使用了Ant Design的Button和Input组件。