How to rotate the image captured using the getscreenshot method in react-webcam?

Question

I am capturing images through react-webcam package but it is in a horizontal manner. I am trying to view the image in a vertical manner. so I want the captured image to rotate at 90 degrees.

capture image is using a method that is this.webcam.getScreenshot(). so I am trying to set properties in this method so that the captured image is in a vertical manner, that it is rotated at 90 degrees.

I tried rotating the preview and capturing the image whereas, that doesn't work. as images still are in a horizontal manner. I want to rotate the image on capture

I tried // imageSrc.css('transform','rotate(90deg)'); but that does not work. the image is captured as a base64 image

here webcam is the preview and capture button gets triggered by a button

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

expected result: The picture is rotated 90 degrees on capturing the image using this method.

actual result: The image is not rotated at 90 degrees and doesn't know how to do it on capture.

Thank you for your time.

Answer 1

You should put your base64 image in an img tag in this way:

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

and then apply the CSS transform that you mentioned the img.

Answer 2

You can rotate the image immediately in the preview using the style property:

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)` }} />

Answer 3

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

Update Below code work for any dimension, only need to adjust in this.dim to reflect your need

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