如何旋转使用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

您可以使用以下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)` }} />