当前位置：首页 > Web前端 > HTML5

Canvas绘制视频封面

时间：2023-04-05 16:05:04 HTML5

video,#container{width:300px;height:200px;}#container>img{width:100%;}1.要求：上传一段视频，截取视频的某一帧作为视频的封面。2、实现思路：利用canvas绘制图像的功能，绘制图像的某一帧。这里绘制了第一帧，实现起来非常简单。三、代码：截屏video,#container{width:300px;height:200px;}#container>img{width:100%;}

(function(){varvideo,container;varscale=0.8;varinitialize=function(){container=document.getElementById("container");video=document.getElementById("video");video.addEventListener('loadeddata',captureImage);};varcaptureImage=function(){varcanvas=document.createElement("canvas");canvas.width=视频.videoWidth*规模;canvas.height=video.videoHeight*scale;canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height);varimg=document.createElement("img");img.src=canvas.toDataURL("image/png");//转成base64图片，地址可以直接使用container.appendChild(img);};初始化（）;})();

上一篇：从HTML标签

下一篇：语义元素

Canvas绘制视频封面相关文章

最新推荐

猜你喜欢