记录下一个疑问，最近在重新看canvas做点Demo这样，时间是写在2019年11月5日，以后要是没有这个问题了，以W3C更新的为标准，这个只是参考 尝试着在canvas中显示视频第一帧的时候碰上的问题：在Chrome中，用 video.addEventLisener(“loadeddata”,func)、 video.onloadeddata = func无法在函数中获取到 未预加载的视频的第一帧的图片。同样的代码在Firefox中 未预加载的视频可以获取到第一帧，并且能够渲染到canvas中。以下都是不进行预加载的情况下运行的。
要是不能运行了就在评论里说下，我是从写的一个Demo里截下来一部分的=。=
HTML代码片段
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 | <div class="canvas-class"> </div><div class="img-source"> <div class="video-div"> <video id="videoSource" controls="controls" poster="" src="../../resources/1.mp4" data-origwidth="0" data-origheight="0" style="width: 1264px;"><strong>Chrome能显示方法</strong><p>在标签中添加事件处理，这时候可以得到第一帧的图片数据。</p><div class="jb51code"><pre class="brush:js;"> 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); };</pre></div><p><span style="color: #ff0000"><strong>Firefox下可以运行的</strong></span></p><p>以下两种方法在Chrome下没法显示图片，但是在Firefox下也可以显示。在Chrome控制台你可以看见拿到的dataURL其实是一个全透明的矩形。不过在预加载、加载过或者缓存过一次视频后，canvas就有了。</p><p><strong>方法一</strong></p><p>JS代码片段</p><div class="jb51code"><pre class="brush: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;</pre></div><p><strong>方法二</strong></p><p>其实跟方法一类似，不过思路是用document创建的HTMLVideoElement作一次中转之后来触发这个loadeddata事件的发生，算是上面方法在video的应用。</p><div class="jb51code"><pre class="brush:js;">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);</pre></div><p>到此这篇关于Canvas获取视频第一帧缩略图的实现的文章就介绍到这了,更多相关Canvas视频缩略图内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！</p><div class="clearfix"> <span id="art_bot" class="jbTestPos"></span> </div><p> </p></video></div><div class="tags clearfix"> <i class="icon-tag"></i><p></p><ul class="meta-tags"><li class="tag">Tag：<a href="https://www.jb51.net/do/tag/Canvas/" target="_blank" rel="noopener">Canvas</a> <a href="https://www.jb51.net/do/tag/%E8%A7%86%E9%A2%91/" target="_blank" rel="noopener">视频</a> <a href="https://www.jb51.net/do/tag/%E7%BC%A9%E7%95%A5%E5%9B%BE/" target="_blank" rel="noopener">缩略图</a> </li></ul></div><div class="lbd clearfix"> <span id="art_down" class="jbTestPos"></span> </div><div id="shoucang"></div><div class="xgcomm clearfix"><h2>相关文章</h2><ul><li class="lbd clearfix"><span id="art_xg" class="jbTestPos"></span></li><li><div class="item-inner"><div class="img-wrap"><img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/09/frc-8e91820a6fc4ba7ff7ec544b59f72412.jpg"></div><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/html5/694784.html" title="HTML5 Canvas 破碎重组的视频特效的示例代码" rel="noopener">HTML5 Canvas 破碎重组的视频特效的示例代码</a></p><div class="item-info"><div class="js"> 这篇文章主要介绍了HTML5模拟齿轮动画的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学</div><p><span class="lbtn fr"> 2019-09-24 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="img-wrap"><img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/09/frc-b4f3469791eb73b635712dba8bef2c6f.jpg"></div><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/html5/678376.html" title="前端canvas动画如何转成mp4视频的方法" rel="noopener">前端canvas动画如何转成mp4视频的方法</a></p><div class="item-info"><div class="js"> 这篇文章主要介绍了前端canvas动画如何转成mp4视频的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一</div><p><span class="lbtn fr"> 2019-06-17 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="img-wrap"><img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/09/frc-76b256f8693a76588fe688cb84ed08d4.jpg"></div><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/html5/636202.html" title="canvas像素点操作之视频绿幕抠图" rel="noopener">canvas像素点操作之视频绿幕抠图</a></p><div class="item-info"><div class="js"> 这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧</div><p><span class="lbtn fr"> 2018-09-11 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="img-wrap"><img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/09/frc-58198a60da019240a6ed47df218f388e.gif"></div><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/html5/620989.html" title="video结合canvas实现视频在线截图功能" rel="noopener">video结合canvas实现视频在线截图功能</a></p><div class="item-info"><div class="js"> 这篇文章主要介绍了video结合canvas实现视频在线截图功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下</div><p><span class="lbtn fr"> 2018-06-25 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="img-wrap"><img decoding="async" src="https://www.2it.club/wp-content/uploads/2024/09/frc-deb6128dce0f0bf55ebd43b767d95b82.png"></div><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/html5/599051.html" title="canvas绘制视频封面的方法" rel="noopener">canvas绘制视频封面的方法</a></p><div class="item-info"><div class="js"> 这篇文章主要介绍了canvas绘制视频封面的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧</div><p><span class="lbtn fr"> 2018-02-05 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/html5/594602.html" title="详解基于canvas的视频遮罩插件" rel="noopener">详解基于canvas的视频遮罩插件</a></p><div class="item-info"><div class="js"> 这篇文章主要介绍了详解基于canvas的视频遮罩插件，详细介绍了如何为一个视频添加一个覆盖物，非常具有实用价值，需要的朋友可以参考下</div><p><span class="lbtn fr"> 2018-01-04 </span></p></div></div></div></div></li><li><div class="item-inner"><div class="rbox"><div class="rbox-inner"><p><a class="link title" target="_blank" href="https://www.jb51.net/html5/519043.html" title="canvas与html5实现视频截图功能示例" rel="noopener">canvas与html5实现视频截图功能示例</a></p><div class="item-info"><div class="js"> 本篇文章主要介绍了canvas与html5实现视频截图功能示例，非常具有实用价值，需要的朋友可以参考下。</div><p><span class="lbtn fr"> 2016-12-15 </span></p></div></div></div></div></li></ul></div><div class="lbd clearfix mt5"> <span id="art_down2" class="jbTestPos"></span> </div><p> <a href=""></a></p><div id="comments"><h2>最新评论</h2><div class="pd5"><div id="SOHUCS"></div></div></div><p></p></div> |
