Попытка обрезать изображение со скриншота веб-камеры, React

Question

Извинения, это скорее запрос к подходу, который я должен использовать. Я пытаюсь обрезать изображение, которое я получаю с веб-камеры, используя

cam.ref.getscreenshot() - что дает мне base64, который я могу отобразить через srcк элементу img.

мой вопрос: мне не нужно перетаскивать и обрезать утилиту на экране, поскольку мне просто нужно обрезать изображение до заданного размера один раз, а затем передать его в мою отправку, которую позже я буду использовать для сохранения вмоя база данных

как мне поступить?

Я пытался отобразить его через холст и вернуть через

canvas.toDataURL('image/jpeg')

, но я просто получаю черный экран, дажепопытался протестировать просто как

function cropimage(image, crop){
 var croppedimage = new image();
 croppedimage.src = image;

var canvas = document.createElement("canvas");
var ctx = canvas.getcontext('2d)

ctx.drawimage(
  croppedimage,
0,
0,
)

var finalimage = canvas.toDataURL('image/jpeg')

return finalimage
}

извините, я новичок, чтобы отреагировать, поэтому я получаю, если это не правильно, но из того, что я искал, должно по крайней мере отобразить мой скриншот веб-камеры правильно?

как сделатья собираюсь разобраться с этим? Могу ли я просто использовать модуль типа image-cropper и просто использовать его функциональность для своих нужд?

это полный код, который у меня есть пока только для моей тестовой среды, чтобы получить егоработает

import React, { PureComponent } from 'react';
import 'react-image-crop/dist/ReactCrop.css';
import './App.css';
import Webcam from "react-webcam";

class App extends PureComponent {
  state = {
    src: null,
    crop: {
      width: 200,
      height: 200,
      x: 100,
      y: 100,
    },
  };

  onSelectFile = e => {
    if (e.target.files && e.target.files.length > 0) {
      const reader = new FileReader();
      reader.addEventListener('load', () =>
        this.setState({ src: reader.result }),
      );
      reader.readAsDataURL(e.target.files[0]);


    }
  };



 getCroppedImg(image, crop) {



  var cimage = new Image();
  cimage.src = image
  const canvas = document.createElement('canvas');
  const scaleX = cimage.naturalWidth / cimage.width;
  const scaleY = cimage.naturalHeight / cimage.height;
  canvas.width = crop.width;
  canvas.height = crop.height;
  const ctx = canvas.getContext('2d');


  if(cimage.complete){
    ctx.drawImage(
      cimage,
   0,
   0,
    );
  }
  else {
  cimage.onload = function(){
  console.log(cimage)
  ctx.drawImage(
    cimage,
   0,
   0,
  );
  }
  }


  var base64 = canvas.toDataURL('image/jpeg')
    console.log(cimage);
  return base64



}

WebcamCapture = () => {
  const webcamRef = React.useRef(null);

  const capture = React.useCallback(
    () => {


      const imageSrc = webcamRef.current.getScreenshot();
      this.setState({src: imageSrc});
      console.log( "help", imageSrc);
    },
    [webcamRef]
  );

  return (
    <>

      <Webcam
        audio={false}
        height={720}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
        width={1280}
      />
      <button onClick={capture}>Capture photo</button>

    </>
  );
};




  render() {
    const { crop, croppedImageUrl, src } = this.state;

    return (
      <div className="App">
        <div>
          <input type="file" onChange={this.onSelectFile} />
        </div>
        <this.WebcamCapture />
        <div> 
        {src && (         

        <img src={this.getCroppedImg(src, crop)} />

        ) }

        </div>
      </div>
    );
  }
}

export default App;

иногда он использует небольшой JPEG-файл и обрезает его именно так, как я хочу, но больше ничего и не будет работать с камерой