Canvas获取视频第一帧缩略图的实现_html5教程技巧

来源:脚本之家  责任编辑:小易  

刚好我这有点代码:<!doctype html><html> <head> <meta charset="utf-8"> <!-- TemplateBeginEditable name="doctitle" --> <title>我的图片</title> </head> <body> <canvas id="Map" width="500" height="500" style="background:gray;"></canvas> <script> // 设置绘图环境 var myMap = document.getElementById("Map"); var cxt = myMap.getContext('2d'); // 设置图像位置初始位置的变量636f707962616964757a686964616f31333335333736 var x = 20; var y = 20; // 创建绘图对象,并且画出来 var img = new Image(); img.src = "img/u55.png"; draw(); function draw() { cxt.clearRect(0, 0, 500, 500); x += 1; y += 5; cxt.drawImage(img, x, y, 80, 80); } window.setInterval(draw, 100); </script> </body></html>你把图片的路径改为你的图片路径就行了!www.zgxue.com防采集请勿采集本网。

记录下一个疑问,最近在重新看canvas做点Demo这样,时间是写在2019年11月5日,以后要是没有这个问题了,以W3C更新的为标准,这个只是参考 尝试着在canvas中显示视频第一帧的时候碰上的问题:在Chrome中,用 video.addEventLisener("loadeddata",func)、 video.onloadeddata = func无法在函数中获取到 未预加载的视频的第一帧的图片。同样的代码在Firefox中 未预加载的视频可以获取到第一帧,并且能够渲染到canvas中。以下都是不进行预加载的情况下运行的。

html5中的canvas本身的API是不存在图层概念的。要想实现实现多图层功能,必须要使用多个canvas对象,不过这些canvas对象,是在内存中的,而不是在html的元素树中。每个canvas维持一个图层就可以,然后主canvas是负责显示最后的合成的效果。 js动

要是不能运行了就在评论里说下,我是从写的一个Demo里截下来一部分的=。=

不需要分割,你画到canvas上时只要指定图像的坐标和高宽就行了: context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):选取图像的一部分矩形区域进行绘制 image:Image对象var img=new Image(); img.src="url()"; sx:图像上的x坐标 sy:图像上

HTML代码片段

Path是基于canvas 的绘图并不是直接在 canvas 标签所创建的绘图画面上进行各种绘图操作,而是依赖画面所提供的渲染上下文(Rendering Context),所有的绘图命令和属性都定义在渲染上下文当中。 通过canvas id获取相应的DOM对象  获取渲

<div class="canvas-class"> <canvas id="canvasImgDemo"></canvas></div><div class="img-source"> <div class="video-div"> <video id="videoSource" controls="controls" poster src="../../resources/1.mp4" onloadeddata="videoGetFirstFrame(this) ></video> </div></div>

canvas画图,canvas对象为var c=document.getElementById("myCanvas");其应有js属性方法如下列举: 1:绘制渲染对象,c.getContext("2d"),获取2d绘图对象,无论我们调用多少次获取的对象都将是相同的对象。 2:绘制方法: clecrRect(left,top,wi

Chrome能显示方法

var img1 = document.getElementById("img1"), img2 = document.getElementById("img2"), img3 = document.getElementById("img3");var canvas = document.createElement("canvas"), context = canvas.getContext("2d");canvas.width = img1.nat

在标签中添加事件处理,这时候可以得到第一帧的图片数据。

var imgs = []; var videoGetFirstFrame = (elem) => { var canvas = document.createElement("canvas"), img = new Image(); canvas.getContext("2d").drawImage(elem, 0, 0); let dataURL = canvas.toDataURL("image/png"); img.onload = (e) => { var target = document.getElementById("canvasImgDemo"), ctx = target.getContext("2d"); ctx.drawImage(img, 0, 0, target.width, target.height); }; imgs.push(dataURL); };

Firefox下可以运行的

以下两种方法在Chrome下没法显示图片,但是在Firefox下也可以显示。在Chrome控制台你可以看见拿到的dataURL其实是一个全透明的矩形。不过在预加载、加载过或者缓存过一次视频后,canvas就有了。

方法一

JS代码片段

let elem = document.getElementById("canvasImgDemo"), ctx = elem.getContext(module.CONTEXT_TYPE), targetElem = document.getElementById(target), tagName = targetElem.tagName; ctx.drawImage(targetElem, 0, 0);var imgData = elem.toDataURL("image/png"),img = new Image();img.onload = () => { ctx.drawImage(img, 0, 0, elem.width, elem.height);}img.src = imgData;

方法二

其实跟方法一类似,不过思路是用document创建的HTMLVideoElement作一次中转之后来触发这个loadeddata事件的发生,算是上面方法在video的应用。

let video = document.createElement("video");video.addEventListener("loadeddata", (evt) => { ctx.drawImage(evt.target, 0, 0); let dataURL = elem.toDataURL("image/png"); let img = new Image(); img.onload = () => { ctx.drawImage(img, 0, 0, 300, 150); }; img.src = dataURL;});video.src = targetImg.src;ctx.drawImage(targetImg, 0, 0);

到此这篇关于Canvas获取视频第一帧缩略图的实现的文章就介绍到这了,更多相关Canvas视频缩略图内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

<span style="font-size:18px;"><!DOCTYPE html> <head> <meta charset=utf-8> <title>PHP100 HTML5视频教程62616964757a686964616fe4b893e5b19e31333363383333-canvas-吹气球效果</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> </head> <body> <canvas id="php100" width="500" height="200" ></canvas> <br> <!-- 画布 --> <script type="text/javascript"> var canvas = document.getElementById('php100'); //获取画布 var p100=canvas.getContext("2d"); //设置模式 var dir=0; //设置线条起点 var width=500; //要清除的矩形的宽度 var height=200; //要清除的矩形的高度 var exp=1; //像素移动的位置,正数向下,负数向上 p100.strokeStyle = "rgba(255,0,0,1)"; //定义颜色 function fff(){ p100.clearRect(0,0,width,height); //清除原始图形 0 0 表示矩形的左上角的X Y轴坐标 p100.fillStyle="red"; //定义颜色 p100.beginPath(); //从新开始画,防止冲突重叠 p100.arc(180,dir,dir,0,Math.PI*2,1); //x坐标,y坐标,半径,Math.PI是圆周率 半径也设置成圆点的位置就实现吹气球的效果 p100.closePath(); //结束画布,防止冲突重叠 p100.fill(); //结束渲染 dir=dir+exp; //向下移动 if(dir==0 || dir==height){ exp=exp*-1; //掉头位置//乘以负一用来调整线路方向 } } //setInterval(code,millisec) 按照指定的周期来调用函数,返回值为定时器的ID值 赋值给一个变量 //clearInterval(idofsetInterval)取消由setInterval()方法设置的定时器。 </script> <button onclick="tt=setInterval(fff,20);">开始</button> <button onclick="clearInterval(tt);">停止</button> </body> </html> </span>内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html5 canvas 破碎重组的视频特效的示例代码
  • 前端canvas动画如何转成mp4视频的方法
  • canvas像素点操作之视频绿幕抠图
  • video结合canvas实现视频在线截图功能
  • canvas绘制视频封面的方法
  • 详解基于canvas的视频遮罩插件
  • canvas与html5实现视频截图功能示例
  • html5中canvas对图片进行动画处理
  • html5 canvas怎么让图片动起来, 我用的是drawImage...
  • html5 canvas 代码 求最简单的动画效果 一个圆在左...
  • 关于html5 canvas 绘图动画的问题,我要实现把一张...
  • html5 javascript实现canvas里边多图层显示怎么弄
  • 请问下html5的canvas中如何利用人物走路的png图(人...
  • html5中的canvas的path是怎么回事?最好有视频
  • HTML5用canvas怎么实现动画效果
  • HTML5如何通过canvas,把两张图片绘制到画布,然后...
  • 为什么我在html5中取到了canvas画布(已测试能取到...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5canvas视频canvas绘制视频封面的方法详解基于canvas的视频遮罩插件canvas与html5实现视频截图功能示例html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解canvas获取视频第一帧缩略图的实现使用layui框架实现点击左侧导航切换右侧内容且右侧选使用layui实现左侧菜单栏及动态操作tab项的方法萌新html5 入门指南(二)萌新的html5 入门指南关于webview适配h5上传照片或者视频文件的方法浅析html5 meta viewport参数一个基于canvas的移动端图片编辑器的实现详解html5布局和html5标签html5实现移动端点击翻牌功能
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved