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

1. <div class="canvas-class">
   
2. <canvas id="canvasImgDemo"></canvas>
   
3. </div>
   
4. <div class="img-source">
   
5. <div class="video-div">
   
6.   <video id="videoSource"
   
7.    controls="controls"
   
8.    poster
   
9.    src="../../resources/1.mp4"
   
10.    onloadeddata="videoGetFirstFrame(this)
    
11.   ></video>
    
12. </div>
    
13. </div>

复制代码

Chrome能显示方法
在标签中添加事件处理，这时候可以得到第一帧的图片数据。

1. var imgs = [];
   
2. var videoGetFirstFrame = (elem) => {
   
3.   var canvas = document.createElement("canvas"),
   
4.    img = new Image();
   
5.   canvas.getContext("2d").drawImage(elem, 0, 0);
   
6. 
   
7.   let dataURL = canvas.toDataURL("image/png");
   
8.   img.onload = (e) => {
   
9.    var target = document.getElementById("canvasImgDemo"),
   
10.     ctx = target.getContext("2d");
    
11.    ctx.drawImage(img, 0, 0, target.width, target.height);
    
12.   };
    
13.   imgs.push(dataURL);
    
14. };

复制代码

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

1. let elem = document.getElementById("canvasImgDemo"),
   
2. ctx = elem.getContext(module.CONTEXT_TYPE),
   
3. targetElem = document.getElementById(target),
   
4. tagName = targetElem.tagName;
   
5. 
   
6. ctx.drawImage(targetElem, 0, 0);
   
7. var imgData = elem.toDataURL("image/png"),
   
8. img = new Image();
   
9. img.onload = () => {
   
10. ctx.drawImage(img, 0, 0, elem.width, elem.height);
    
11. }
    
12. img.src = imgData;

复制代码

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

1. let video = document.createElement("video");
   
2. video.addEventListener("loadeddata", (evt) => {
   
3. ctx.drawImage(evt.target, 0, 0);
   
4. let dataURL = elem.toDataURL("image/png");
   
5. let img = new Image();
   
6. img.onload = () => {
   
7.   ctx.drawImage(img, 0, 0, 300, 150);
   
8. };
   
9. img.src = dataURL;
   
10. });
    
11. video.src = targetImg.src;
    
12. ctx.drawImage(targetImg, 0, 0);

复制代码

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

来源：https://www.jb51.net/html5/751802.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！