canvas绘制二进制图片(Canvas获取视频第一帧缩略图的实现)
类别:Web前端 浏览量:2693
时间:2021-10-24 10:31:17 canvas绘制二进制图片
Canvas获取视频第一帧缩略图的实现记录下一个疑问,最近在重新看canvas做点Demo这样,时间是写在2019年11月5日,以后要是没有这个问题了,以W3C更新的为标准,这个只是参考 尝试着在canvas中显示视频第一帧的时候碰上的问题:在Chrome中,用 video.addEventLisener("loadeddata",func)、 video.onloadeddata = func无法在函数中获取到 未预加载的视频的第一帧的图片。同样的代码在Firefox中 未预加载的视频可以获取到第一帧,并且能够渲染到canvas中。以下都是不进行预加载的情况下运行的。
要是不能运行了就在评论里说下,我是从写的一个Demo里截下来一部分的=。=
HTML代码片段
<li class="canvas-class"> <canvas id="canvasImgDemo"></canvas> </li> <li class="img-source"> <li class="video-li"> <video id="videoSource" controls="controls" poster src="../../resources/1.mp4" onloadeddata="videoGetFirstFrame(this) ></video> </li> </li>
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视频缩略图内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- canvas设置点击(Canvas高级路径操作之拖拽对象的实现)
- canvas如何保存当前的图片(canvas如何实现多张图片编辑的图片编辑器)
- canvas俄罗斯方块(JavaScript canvas实现俄罗斯方块游戏)
- canvas绘图白屏或者元素有缺失(高清屏中使用Canvas绘图出现模糊的问题及解决方法)
- jscanvas背景色(JavaScript canvas实现代码雨效果)
- html 设置canvas的背景图可缩放(浅析canvas元素的html尺寸和css尺寸对元素视觉的影响)
- canvas实现字体粒子爆炸特效(javascript canvas实现雨滴效果)
- canvas画布多次渲染失败(深入了解canvas在移动端绘制模糊的问题解决)
- canvas绘图问题(记一次高分屏下canvas模糊问题)
- 如何使用html5的canvas图(html5 canvas实现给图片添加平铺水印)
- 使用canvas的好坏(关于canvas绘制模糊问题的解决方法)
- canvas绘制分辨率(通过canvas转换颜色为RGBA格式及性能问题的解决)
- canvas 中增加组件(如何在Canvas中添加事件的方法示例)
- 小程序canvas不显示(小程序canvas中文字设置居中锚点)
- canvas如何在网页上画图形(canvas绘制图片drawImage使用方法)
- canvas怎么压缩图片(使用canvas压缩图片大小的方法示例)
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
- 刚红就耍大牌,《琉璃》角色滤镜碎一地,心疼工作人员(琉璃角色滤镜碎一地)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
- 《祝卿好》台词又土又甜,就喜欢这么直接的恋爱(祝卿好台词又土又甜)
- 大女主 汤唯垂青电视圈,搭档朱亚文出演《大明皇妃孙若微传》(汤唯垂青电视圈)
热门推荐
- 阿里云服务器怎么设置防御网站(阿里云服务器的一些常用安全优化方法整理)
- mysql生成唯一订单号(MySQL高并发生成唯一订单号的方法实现)
- php开发的主要技术(详解PHP神奇又有用的Trait)
- 常见跨浏览器事件的解决方法
- thinkphp5分页数据怎么处理(TP5thinkPHP5框架实现显示错误信息及行号功能的方法)
- php添加到数组的用法(详解PHP 7.4 中数组延展操作符语法知识点)
- ubuntu20.2安装mysql(Ubuntu 14.04下mysql安装配置教程)
- SQLServer中防止并发插入重复数据的方法详解(SQLServer中防止并发插入重复数据的方法详解)
- python无法拒绝的表白代码教程(很酷的python表白工具 你喜欢我吗)
- html5页面强制刷新(移动端html5判断是否滚动到底部并且下拉加载)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9