“This is the 20th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Recently, there is a need to achieve a screenshot of a video. The principle of the underlying screenshot of most third-party video plug-ins is also based on Canvas. Today, I will use canvas to achieve a screenshot of a video.

Video Capture

canvas.getContext(“2d”).drawImage

The principle of canvas screenshot method implementation is to use canvas drawImage method to implement. This method can be passed in three syntax formats, which are as follows:

ctx = canvas.getContext("2d")
ctx.drawImage(image, dx, dy);
Copy the code
ctx.drawImage(image, dx, dy, dWidth, dHeight);
Copy the code
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Copy the code

Passing in two parameters

Where, dx and dy are required parameters, which respectively represent the X-axis coordinates of the upper-left corner of image on the target canvas and the Y-axis coordinates of the upper-left corner of image on the target canvas.

In short, it determines the position of the image in the canvas.

Such as

ctx.drawImage(image, 0.0)
Copy the code

It means that the picture will be drawn from the origin of the canvas. The picture will not be clipped and the aspect ratio will remain unchanged

Pass in four parameters

The first two arguments are dx and dy, and the last two arguments are dWidth and dHeight:

dWidth 和 dHeightEach represents the available width and height for the image.

Simply put, it is to set the size of the picture displayed on canvas. For example:

ctx.drawImage(image, 0.0, image.width, image.height)
Copy the code

The available width and height passed in are exactly the same as the image, so the image will not be compressed, assuming passed in

ctx.drawImage(image, 0.0, image.width, image.height / 2)
Copy the code

The height of the image is then compressed twice:

Passing in eight parameters

If eight parameters are passed in, then the additional four parameters determine how to crop the resulting image

Where, the first two sx and SY determine the coordinates at the beginning of image clipping, and the last two sWidth and sHeight determine the size of the area to be clipped, such as:

ctx.drawImage(image,0.0.1000.1500.0.0, image.width, image.height / 2)
Copy the code

The resulting image is then cropped from (0,0) to 1000 wide and 1500 high.

Achieve video capture

The first parameter of drawImage can not only be passed in image, it can be passed in any canvas image source, so we can also pass in a video, and then we can use the above method to get a screenshot of a certain position of the video at the moment.

Canvas. toDataURL Gets the address of the image

The data URI () method returns a data URI containing the image presentation. You can change its type using the type parameter, which defaults to PNG.

Such as:

console.log(canvas_.toDataURL("image/jpg"));
img.src = canvas_.toDataURL("image/jpg");
Copy the code

In this way, we can get the data URI of the current screenshot and assign it to an IMG image. In this way, we can implement the screenshot function and get the data URI of the screenshot. One of the following diagrams is drawn by the Canvas drawImage, which is a Canvas element

The other is the IMG image that we assign, which is an IMG element.

Put detailed code at the end

<! DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />

    <title>Upload the video, preview it, capture the image, and capture the duration</title>
  </head>
  <style>
    body {
      display: flex;
    }
  </style>
  <body>
    <div>
      <input type="file" onchange="changFile(this)" />
      <div id="showVideo"></div>
    </div>
    <div>
      <img id="image"  style=" margin: 23px 10px 0 10px;"/>
    </div>
    <div>
      <button onclick="manualCapture()">Click the screenshot</button><br />
      <canvas id="canvas_"></canvas>
    </div>

    <script>
      function changFile(ele) {
        var videoFile = ele.files[0];
        var url = URL.createObjectURL(videoFile);
        console.log(url);
        var showVideo = document.getElementById("showVideo");
        var htmls =
          ' <video width="400px" id="video" height="auto" autoplay="autoplay" controls > <source src="' +
          url +
          '"> Your browser does not support HTML5 video elements. ';
        showVideo.innerHTML = htmls;
      }
      function manualCapture() {
        var video_ = document.getElementById("video");
        var canvas_ = document.getElementById("canvas_");
        var ctx_ = canvas_.getContext("2d");
        const ratio = window.devicePixelRatio || 1;
        ctx_.scale(ratio, ratio);
        canvas_.width = video_.offsetWidth * ratio;
        canvas_.height = video_.offsetHeight * ratio;
        console.log(video_.clientHeight, video_.clientWidth);
        ctx_.drawImage(video_, 0.0, canvas_.width, canvas_.height);
        var img = document.getElementById("image");
        console.log(canvas_.toDataURL("image/jpg"));
        img.src = canvas_.toDataURL("image/jpg");
      }
    </script>
  </body>
</html>

Copy the code

conclusion

This paper simply uses canvas to capture the picture of the video. Combined with the custom editing of the editor mentioned before, can we achieve a button that can watch the video while taking notes and customize a screenshot?

See my previous two articles on how to customize an editor button and extend it. Combined with today’s screenshot function, you can achieve a video screenshot function block.

This extension brings you to define your own editor.js tool – Digging (juejin. Cn)