Question

我正在通过react-webcam软件包捕获图像，但是它是水平的。我正在尝试以垂直方式查看图像。所以我希望捕获的图像旋转90度。

捕获的图像正在使用this.webcam.getScreenshot()的方法。因此，我尝试使用此方法设置属性，以使捕获的图像以垂直方式旋转90度。

我尝试过旋转预览并捕获图像，但这是行不通的。因为图像仍然是水平的。我想在捕获时旋转图像

我尝试了// imageSrc.css('transform','rotate(90deg)'); 但这不起作用。该图像被捕获为base64图像

这里的摄像头是预览和捕获按钮，由按钮触发

capture = () => {
    const imageSrc =  this.webcam.getScreenshot();
    this.setState({
        picsArray: [...this.state.picsArray, imageSrc],
    })
};

预期结果：使用此方法在捕获图像时将图片旋转90度。

实际结果：图像未旋转90度，并且不知道如何在捕获时进行处理。

谢谢您的时间。

Answer 1

import React, { Component } from 'react';
import { render } from 'react-dom';
import Webcam from "react-webcam";

class App extends Component {
  state = {
    url: '',
  };

  setRef = webcam => {
    this.webcam = webcam;
  };

  capture = () => {
    const imageSrc = this.webcam.getScreenshot();
    this.rotateImage(imageSrc, 180, (url) => {
    this.setState({ url});
    console.log(url, imageSrc);
    });
  };

  rotateImage = (imageBase64, rotation, cb) => {
            var img = new Image();
            img.src = imageBase64;
            img.onload = () => {
              var canvas = document.createElement("canvas");
              // var canvas = document.createElement("canvas");
              canvas.width = img.width;
              canvas.height = img.height;
              var ctx = canvas.getContext("2d");
              ctx.setTransform(1, 0, 0, 1, img.width / 2, img.height / 2);
              ctx.rotate(rotation * (Math.PI / 180));
              ctx.drawImage(img, -img.width / 2, -img.height / 2);
              cb(canvas.toDataURL("image/jpeg"))
            };
};

  render() {
    const videoConstraints = {
      width: 1280,
      height: 720,
      facingMode: "user"
    };

    return (
      <div>
        <Webcam
          audio={false}
          height={350}
          ref={this.setRef}
          screenshotFormat="image/jpeg"
          width={350}
          videoConstraints={videoConstraints}
        />
        <button onClick={this.capture}>Capture photo</button>
        <img src={this.state.url} width="200" height="100" />
        <canvas id="canvas" style={{display: 'none'}}></canvas>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

更新下面的代码适用于任何维度，只需在this.dim中进行调整即可反映您的需求

import React, { Component } from 'react';
import { render } from 'react-dom';
import Webcam from "react-webcam";

class App extends Component {
  state = {
    url: '',
  };

  dim = {
    height: 300, // adjust your original height
    width: 200, // adjust your original width
  };

  setRef = webcam => {
    this.webcam = webcam;
  };

  capture = () => {
    const imageSrc = this.webcam.getScreenshot();
    this.rotateImage(imageSrc, (url) => {
    this.setState({ url});
    console.log(url, imageSrc);
    });
  };

  rotateImage = (imageBase64, cb) => {
            var img = new Image();
            img.src = imageBase64;
            img.onload = () => {
              var canvas = document.createElement("canvas");
              const maxDim = Math.max(img.height, img.width);
              canvas.width = img.height;
              canvas.height = img.width;
              var ctx = canvas.getContext("2d");
              ctx.setTransform(1, 0, 0, 1, maxDim / 2, maxDim / 2);
              ctx.rotate(90 * (Math.PI / 180));
              ctx.drawImage(img, -maxDim / 2, -maxDim / 2);
              cb(canvas.toDataURL("image/jpeg"))
            };
};

  render() {
    const videoConstraints = {
      width: this.dim.width,
      height: this.dim.height,
      facingMode: "user"
    };

    return (
      <div>
        <Webcam
          audio={false}
          height={this.dim.height}
          ref={this.setRef}
          screenshotFormat="image/jpeg"
          width={this.dim.width}
          videoConstraints={videoConstraints}
        />
        <button onClick={this.capture}>Capture photo</button>
        <img src={this.state.url} width={this.dim.height} height={this.dim.width} />
        <canvas id="canvas" style={{display: 'none'}}></canvas>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 2

您应通过以下方式将base64图像放入img标记中：

<img src="data:image/png;base64, YOUR_BASE_64" />

，然后应用您提到的img的CSS变换。

Answer 3

您可以使用class my_exceptions(Exception): """Base class for other exceptions""" pass class pdv_error_response(my_exceptions): def __init__(self, tag, message): self.tag = tag self.tag = message def tryerror(x): if x < 0: raise(pdv_error_response('test','output')) def main(): try: tryerror(-1) except: if pdv_error_response: print(pdv_error_response) if __name__ == '__main__': main()属性在预览中立即旋转图像：

style

如何旋转在react-webcam中使用getscreenshot方法捕获的图像？

3 个答案: