Hello, dear readers, how have you been?

Due to a lot of things recently, the update of the article was delayed. The project needed to be put online and I often worked overtime. Coupled with some of my own learning plans, the article was not updated for more than a month.

Some people will ask, deng elder brother how do you not carry and reprint other people’s articles? , so the public number will not break more, this question is good, familiar with my readers should find that my articles are all original articles.

Just began to run the public number, may reprint one or two articles, from then on I insisted on the original. Not reprint, this is actually related to the positioning of my public number.

The purpose of my article writing is very simple, not to increase fans, but more for personal growth, because when you write an article, you are actually in the process of self-learning, this process is more efficient than you simply read knowledge points to absorb.

Of course, in this process, if I can gain readers who recognize me, that is a very happy thing. If not, I have lost nothing. Just stick to my schedule.

So from this point of view, reprint may not mean much to me.

In addition to sharing front-end knowledge, I will share more interesting things with you after learning Python recently. You can pay more attention in the future.

Today, I will share with you a practical skill recently used in the project. The requirement is that you can take screenshots when playing the video.

As we all know, most web pages use the

Here we use the related functions of canvas. As we all know, Canvas emerged with HTML5, which has powerful drawing capabilities. Many visualization libraries make use of Canvas.

Since Canvas has the ability to operate images, today we will use it to achieve the operation of video screenshots. We have studied Canvas for a period of time before. If you want to learn Canvas, we recommend the introductory courses on MOOCs.

Two main methods are used here:

drawImage

The drawImage method draws an image, canvas, or video on a canvas. Grammar:

ctx.drawImage(image, dx, dy); ctx.drawImage(image, dx, dy, dWidth, dHeight); ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); Three usages, this article does not do too much description, interested can view the relevant documentation. The parameter image: allows any image source, so we can use this feature to operate on video. See related documentation for more information

toDataURL

The toDataURL method can return the data URI corresponding to the Canvas image, which is commonly known as the Base64 address. Format: data:[][;base64],

implementation

Using the above method, we can easily achieve a screenshot of the video, which is mainly divided into three steps:

Draw an image on the canvas using the drawImage method.

Get the address of the image using the toDataURL method.

Create an img tag and assign it to SRC.

<video id="video" SRC ="./flower.webm" width="300" controls></video> <button onclick="captureVideo()"> <script> let video = document.getElementById("video"); let canvas = document.createElement("canvas"); let img = document.createElement("img"); let ctx = canvas.getContext("2d"); function captureVideo() { canvas.width = video.videoWidth; canvas.height = video.videoHeight; ctx.drawImage(video, 0, 0, canvas.width, canvas.height); img.src = canvas.toDataURL(); document.body.append(img); }Copy the code

So that’s it. Let’s see what happens.

Finally, if you think the article is good and enlightening to you, “like” is a kind of attitude and recognition.

Wechat official number: Six small dengdeng, more dry goods articles, here are a lot of my stories, welcome to exchange.