Canvas获取视频第一帧缩略图的实现


Posted in HTML / CSS onNovember 11, 2020

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

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

HTML代码片段

<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>

Chrome能显示方法

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

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视频缩略图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 #HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 #HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 #HTML / CSS
萌新的HTML5 入门指南
Nov 06 #HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 #HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 #HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 #HTML / CSS
You might like
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
通过python3实现投票功能代码实例
2019/09/26 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
Linux上比较文件的命令都有哪些
2013/09/28 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
Ruby如何定义一个类
2012/10/08 面试题
国际贸易专业个人求职信格式
2014/02/02 职场文书
办公室副主任职责范本
2014/03/08 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
会议邀请函
2015/01/30 职场文书
python 中的@运算符使用
2021/05/26 Python
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android