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

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

您可以使用style属性在预览中立即旋转图像：

90:
<Webcam style={{ transformOrigin: '0 0', transform: `translateX(${(480 + 640) / 2}px) rotate(90deg)` }} /> // height + width
180:
<Webcam style={{transform: 'rotate(180deg)'}} />,
270:
<Webcam style={{ transformOrigin: '0 0', transform: `translate(${(480 - 640) / 2}px, ${480}px) rotate(-90deg)` }} />