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中的5个有趣的新技术
Apr 02 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 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
PHP 函数学习简单小结
2010/07/08 PHP
iOS10推送通知开发教程
2016/09/19 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
javascript回到顶部特效
2016/07/30 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
深入理解vue Render函数
2017/07/19 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
python遍历目录的方法小结
2016/04/28 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
python 换位密码算法的实例详解
2017/07/19 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
总经理助理的八要求
2013/11/12 职场文书
法定代表人证明书
2014/11/28 职场文书
安全员岗位职责范本
2015/04/11 职场文书
社团招新宣传语
2015/07/13 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python