Video combines with canvas to realize online video screenshot function

Let me explain to you an interesting little demo I saw a few days ago: an online screenshot of the video. Here is the rendering after I modified and added new features:

Isn’t it cool? It’s actually quite simple. I’ll tell you how to do it below.

It is mainly divided into three major functions, the first is the first one:

Use the URL object to obtain the video link and display it:

The URL object of js has a createObjectURL method, which can obtain the URL of a file (File object) and then insert it into the src attribute of the video element, so that the video can be displayed. Of course, there are several ways to get the File object, such as using input elements or dragging. A complete code snippet:

 <input type=file/>document.querySelector('input[type=file]').addEventListener('change',function () { document.querySelector('video').src = window.URL.createObjectURL(this. files[0])})

Of course, I didn't write it like this in the source code, just to give you a demonstration. For more specific use of URLs, you can read this article or MDN.

The next step is the key step, but it is also very simple, that is, using the drawImage method of canvas. If you turn to Section 15.2.6 of Elevation 3, you will find that the use of the drawImage method is described in very detail, but it is missed. One, that is, the video element can also be passed into the drawImage method and graphics can be drawn. Specific code snippet:

 var canvas = document.createElement(canvas);var canvasCtx = canvas.getContext(2d);var video=document.querySelector('video');//Set the x, y axis coordinates and size of the original image, and the x of the target image , y-axis label, size. canvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);//Encode the base64 icon into a url string var dataUrl = canvas.toDataURL(image/png);// Insert the image into the src attribute document.createElement('img').src=dataUrl;

After drawing the image, call the toDataURl method of canvas to turn the image into a base64-encoded URL, which can be inserted into the img element for display. The production of a thumbnail image is completed. Regarding the relationship between pictures and base64, students can read this article.

The main principle of implementing this animation is: first create a large picture with the same size as the video in the original position of the video, set it to absolute layout (position:absolut), create a small picture where the thumbnail is actually placed, and set it to invisible (visibility: hidden), and then the large picture is displaced through left and top, and width and height are reduced to the actual place where the thumbnail is placed, and an animation effect is formed. Finally, delete the large picture and display the small picture. Specific code snippet:

 function getOffset(elem) { var pos = {x: elem.offsetLeft, y: elem.offsetTop}; var offsetParent = elem.offsetParent; while (offsetParent) { pos.x += offsetParent.offsetLeft; pos.y += offsetParent .offsetTop; offsetParent = offsetParent.offsetParent; } return pos;}

This function obtains the distance between the small picture and the viewport (viewport) and provides it to the large picture as a displacement parameter. Section 12.2.3 of Elevation 3 has an almost identical code, with detailed instructions and the alternative getBoundingClientRect function. It was also mentioned, please read the book for details.

The following code is to create large pictures and small pictures and achieve animation effects. For convenience and ease of understanding, I use JQuery here

 var $imgBig = $(<img/>);//Set the initial position of the big picture, which is the original video. $imgBig.css({ position: absolute, left: video.offsetLeft, top: video.offsetTop, width: video.offsetWidth+ px, height: video.offsetHeight+ px}).attr(src, dataUrl);var $img = $ (<img/>);$img.hide();//Get the distance parameter of the small picture to achieve the animation effect of the large picture. var offset = getOffset($img[0]);//Add animation effect $imgBig.animate({ left: offset.x + px, top: offset.y + px, width: $img.width() + px, height: $img.height() + px}, 500, function () { $img.show(); $imgBig.remove();});

Well, that's it for the main code part. Of course, there are still many detailed issues in the specific implementation and other functions that may not be shown, so I won't explain them one by one. You can go into details after reading the source code. Ask questions.

Below is my source code address, you can try it:

demo on github

The above is the video combined with canvas that the editor introduces to you to realize the online video screenshot function. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!