记录下一个疑问,最近在重新看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);
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]