Canvas绘制,canvas绘制一张图片

　　一、需求：上传视频，同时截取视频某一帧作为视频的封面。

　　二、实现思路：利用帆布绘制图像的功能，绘制图像某一帧，这里绘制了第一帧，很简单就实现了。

　　三、代码：

　　！DOCTYPE html html head meta charset= UTF-8 标题捕获屏幕/标题样式type= text/CSS 视频，# container { width:300 px；高度：200px} #容器img {宽度：100%；}/style/head body视频id= video controls= controls source src= video/video _ test。MP4 /video div id= container /div script type= text/JavaScript (function(){ var video，container；定义变量标度=0.8;var initialize=function(){ container=document。getelementbyid(“容器”)；视频=文档。getelementbyid( video )；视频。addevent侦听器( loaded data ，capture image)；};var captureImage=function(){ var canvas=document。createelement(“canvas”)；画布。宽度=视频。视频宽度*比例；画布。身高=视频。视频高度*比例；canvas.getContext(2d ).绘图图像(视频，0，0，画布。宽度，画布。身高)；var img=文档。createelement(“img”)；img。src=画布。toda taurl( image/png )；//转换成base64图片，地址拿出来就可以直接使用集装箱。appendchild(img)；};initialize()；})();/script/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。