如何旋转使用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 {&nbsp; state = {&nbsp; &nbsp; url: '',&nbsp; };&nbsp; setRef = webcam => {&nbsp; &nbsp; this.webcam = webcam;&nbsp; };&nbsp; capture = () => {&nbsp; &nbsp; const imageSrc = this.webcam.getScreenshot();&nbsp; &nbsp; this.rotateImage(imageSrc, 180, (url) => {&nbsp; &nbsp; this.setState({ url});&nbsp; &nbsp; console.log(url, imageSrc);&nbsp; &nbsp; });&nbsp; };&nbsp; rotateImage = (imageBase64, rotation, cb) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var img = new Image();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.src = imageBase64;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.onload = () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var canvas = document.createElement("canvas");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // var canvas = document.createElement("canvas");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; canvas.width = img.width;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; canvas.height = img.height;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var ctx = canvas.getContext("2d");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.setTransform(1, 0, 0, 1, img.width / 2, img.height / 2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.rotate(rotation * (Math.PI / 180));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(img, -img.width / 2, -img.height / 2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cb(canvas.toDataURL("image/jpeg"))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };};&nbsp; render() {&nbsp; &nbsp; const videoConstraints = {&nbsp; &nbsp; &nbsp; width: 1280,&nbsp; &nbsp; &nbsp; height: 720,&nbsp; &nbsp; &nbsp; facingMode: "user"&nbsp; &nbsp; };&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <Webcam&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; audio={false}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height={350}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ref={this.setRef}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; screenshotFormat="image/jpeg"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width={350}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; videoConstraints={videoConstraints}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.capture}>Capture photo</button>&nbsp; &nbsp; &nbsp; &nbsp; <img src={this.state.url} width="200" height="100" />&nbsp; &nbsp; &nbsp; &nbsp; <canvas id="canvas" style={{display: 'none'}}></canvas>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}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 {&nbsp; state = {&nbsp; &nbsp; url: '',&nbsp; };&nbsp; dim = {&nbsp; &nbsp; height: 300, // adjust your original height&nbsp; &nbsp; width: 200, // adjust your original width&nbsp; };&nbsp; setRef = webcam => {&nbsp; &nbsp; this.webcam = webcam;&nbsp; };&nbsp; capture = () => {&nbsp; &nbsp; const imageSrc = this.webcam.getScreenshot();&nbsp; &nbsp; this.rotateImage(imageSrc, (url) => {&nbsp; &nbsp; this.setState({ url});&nbsp; &nbsp; console.log(url, imageSrc);&nbsp; &nbsp; });&nbsp; };&nbsp; rotateImage = (imageBase64, cb) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var img = new Image();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.src = imageBase64;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.onload = () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var canvas = document.createElement("canvas");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const maxDim = Math.max(img.height, img.width);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; canvas.width = img.height;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; canvas.height = img.width;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var ctx = canvas.getContext("2d");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.setTransform(1, 0, 0, 1, maxDim / 2, maxDim / 2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.rotate(90 * (Math.PI / 180));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(img, -maxDim / 2, -maxDim / 2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cb(canvas.toDataURL("image/jpeg"))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };};&nbsp; render() {&nbsp; &nbsp; const videoConstraints = {&nbsp; &nbsp; &nbsp; width: this.dim.width,&nbsp; &nbsp; &nbsp; height: this.dim.height,&nbsp; &nbsp; &nbsp; facingMode: "user"&nbsp; &nbsp; };&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <Webcam&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; audio={false}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height={this.dim.height}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ref={this.setRef}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; screenshotFormat="image/jpeg"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width={this.dim.width}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; videoConstraints={videoConstraints}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.capture}>Capture photo</button>&nbsp; &nbsp; &nbsp; &nbsp; <img src={this.state.url} width={this.dim.height} height={this.dim.width} />&nbsp; &nbsp; &nbsp; &nbsp; <canvas id="canvas" style={{display: 'none'}}></canvas>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}render(<App />, document.getElementById('root'));

Answer 2

您可以使用以下style属性在预览中立即旋转图像：90:<Webcam style={{ transformOrigin: '0 0', transform: `translateX(${(480 + 640) / 2}px) rotate(90deg)` }} /> // height + width180:<Webcam style={{transform: 'rotate(180deg)'}} />,270:<Webcam style={{ transformOrigin: '0 0', transform: `translate(${(480 - 640) / 2}px, ${480}px) rotate(-90deg)` }} />