HTML5 - Canvas的使用样例9(绘制视频帧,video视频截图)
前面讲到使用 drawImage() 方法可以绘制图片。这个图片可以是临时创建的图片对象,也可以是页面已存在的 <img> 元素。
除了绘制图片,drawImage() 还可以绘制整个 <canvas> 元素(不是指当前这个),也可以绘制目前正在播放的 <video> 元素。
比如下面样例,当点击“截图”时就会捕获正在播放视频的当前帧画面,然后把该画面绘制到画布上。
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 | <!doctype html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >hangge.com</ title > </ head > < style > canvas { border: 1px dashed black; } </ style > < script > function draw() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var video = document.getElementById("videoPlayer"); context.drawImage(video, 0, 0, video.clientWidth, video.clientHeight); } </ script > < body > < video id = "videoPlayer" src = "hangge.mp4" controls width = "200" height = "150" ></ video > < button onclick = "draw()" >截图</ button > < canvas id = "myCanvas" width = "300" height = "180" > </ body > </ html > |