The principle of analysis

First, use canvas to draw the range to be captured on canvas, and then turn the canvas with drawn image into a data URI for picture display.

Once you have the URI, you can show the screenshot.

The API used
  1. The canvas drawImage() method draws an image on the canvas. Grammar:

ctx.drawImage(imageOrigin, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

The first parameter, imageOrigin, represents the source of the image, which can be an image element, a video element, and so on. The meanings of other parameters are:

  • Sx Optional: The abscissa of the starting point to be captured starting from the upper-left corner.
  • Sy Optional: The vertical coordinate of the starting point to be intercepted with the upper-left corner as the origin.
  • SWidth Optional: Width to be cut.
  • SHeight Optional: Height to intercept.
  • Dx: draw the x-coordinate of the starting point on the canvas with the upper left corner of the target canvas as the distant point.
  • Dy: Take the upper left corner of the target canvas as the distant coordinate point, and draw the vertical coordinate of the starting point on the canvas.
  • DWidth Optional: Width of the image to be drawn. Zooming is allowed. Default: no zooming.
  • DHeight Optional: Height of the image to draw. Scaling is allowed. Default: no scaling.

In summary, the first four parameters are used to select the range to be captured, and the last four parameters specify the range to be drawn.

  1. Canvas’s toDataURL() method returns a data URI containing the image presentation. Grammar:

canvas.toDataURL(type, encoderOptions);

  • Type Optional: Image format. The default value is image/ PNG
  • EncoderOptions Optional: If the image format is image/ JPEG or image/ webP, you can select the image quality from 0 to 1. If the value is out of range, the default value 0.92 will be used. Other parameters are ignored.

Code implementation

First you need to create the canvas and specify its width and height to be the width and height of the target screenshot.

const imageSize = { width: 208.height: 158 };
const canvas = document.createElement('canvas');
canvas.width = imageSize.width;
canvas.height = imageSize.height;
const ctx = canvas.getContext('2d');
Copy the code

Then draw the Canvas image and select the video element of the video to be captured as an argument to pass into the drawing method. X and y indicate where the video should be taken from. Note that the drawing starting point of canvas should be placed at the origin, so the horizontal and vertical coordinates of canvas should be filled with 0.

ctx.drawImage(video, x, y, imageSize.width, imageSize.height, 0.0, imageSize.width, imageSize.height);
Copy the code

In the last step, the drawn canvas is converted into a picture, and the result can be directly used for picture display.

const url = canvas.toDataURL();
img.src = url;
Copy the code

Finally encapsulated into a screenshot function, the complete code is as follows:

function getShot(video, x, y, width, height) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  
  ctx.drawImage(video, x, y, width, height, 0.0, width, height);
  
  return canvas.toDataURL();
}
Copy the code

Matters needing attention

The toDataURL method needs to restrict video homology, and an error will be reported if the video crosses domains.