1. 요구사항: 영상을 업로드하고 영상의 특정 프레임을 영상의 커버로 가로채세요.
2. 구현 아이디어: 캔버스의 이미지 그리기 기능을 사용하여 이미지의 특정 프레임을 그립니다. 여기에는 구현이 매우 간단합니다.
3. 코드:
<!DOCTYPE html><html><head> <meta charset=UTF-8> <title>화면 캡처</title> <style type=text/css> video,#container{width: 300px;height: 200px;} #container>img{너비: 100%;} </style></head><body> <video id=videocontrols=controls> <source src=video/video_test.mp4> </video> <div id=container></div> <script type=text/javascript> (function() { var video, 컨테이너; var scale = 0.8; var 초기화 = function( ) { 컨테이너 = document.getElementById(컨테이너); video = document.getElementById(video); video.addEventListener('loadeddata', CaptureImage); }; var CaptureImage = function() { var canvas = document.createElement(canvas); canvas.width = video.videoWidth * scale; canvas.height = video.videoHeight * scale; 비디오, 0, 0, canvas.width, canvas.height); var img = document.createElement(img); canvas.toDataURL(image/png);//base64 이미지로 변환하고 주소를 꺼내어 직접 사용합니다. < /html>위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.