canvas绘制视频封面的方法
导读:收集整理的这篇文章主要介绍了canvas绘制视频封面的方法,觉得挺不错的,现在分享给大家,也给大家做个参考。 一、需求:上传视频,同时截取视频某一帧作为视频的封面。二、实现思路:利用canvas绘制图像的功能,绘制图像某一帧,这里...
收集整理的这篇文章主要介绍了canvas绘制视频封面的方法,觉得挺不错的,现在分享给大家,也给大家做个参考。 一、需求:上传视频,同时截取视频某一帧作为视频的封面。
二、实现思路:利用canvas绘制图像的功能,绘制图像某一帧,这里绘制了第一帧,很简单就实现了。
三、代码:
!DOCTYPE htML> html> head> meta charset="UTF-8"> tITle> capture screen/title> style type="text/css"> video,#container{ width: 300px; height: 200px; } #container> img{ width: 100%; } /style> /head> body> video id="video" controls="controls"> source src="video/video_test.mp4"> /video> div id="container"> /div> script type="text/javascript"> (function() { VAR video, container; var scale = 0.8; var initialize = function() { container = document.getElementById("container"); 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; canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); var img = document.createElement("img"); img.src = canvas.toDataURL("image/png"); //转换成base64图片,地址拿出来就可以直接使用 container.appendChild(img); } ; initialize(); } )(); /script> /body> /html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: canvas绘制视频封面的方法
本文地址: https://pptw.com/jishu/585814.html