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
}

对不起，是一个新的反应，所以，如果那不是很正确，但是从我搜索的内容中得知，我应该至少显示我的网络摄像头截图吗？

我该如何处理？我可以只使用像图像裁剪器之类的模块，而仅利用其功能来满足我的需求吗？

这是我到目前为止在我的测试环境中可以正常使用的完整代码

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以外的其他地方，并且会完全按照我想要的方式裁剪，但没有其他内容，并且无法与相机配合使用

试图从网络摄像头截图中裁剪图像，React

0 个答案: