javascript - 在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 中调整以反射(reflect)您的需要

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'));