如何通过HTML5 捕获视频的当前帧的图像?

如何通过HTML5 捕获视频的当前帧的图像?

已邀请:

illutomato

赞同来自:

在HTML5中提供了一个叫做的新标签,它和其他所有的DOM对象一样都有自己的属性、方法和事件。其中就有一个绘图的方法。我们可以通过canvas绘图的方法绘制视频中的当前帧画面。下面我们就通过一个代码示例来说明如何截取视频当前帧的图像。该示例实现的效果是当你点击一个Button时就会获取到当前正在播放视频的画面。多说无益请看代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>捕捉视频当前帧画面</title>
  </head>
  <body>
     <div id="result-stub" class="well hidden">
            <!--用一个div元素包裹了一个video元素来进行视频播放。-->
            <div id="player">
                <video id="vid" controls>
                    <source src="../media/big_buck_bunny.mp4" type="video/mp4" />
                    <source src="../media/big_buck_bunny.ogv" type="video/ogg" />
                    <source src="../media/big_buck_bunny.webm" type="video/webm" />
                </video>
            </div>
            <!--设置了一个button按钮来获取视频的画面。-->
            <button id="btn" class="btn btn-mini push-down">Get Thumbnail</button>
            <!--添加一个canvas元素来进行画面绘制。-->
            <canvas id="canvas"></canvas>
        </div>
    <script>
    window.onload=function() {
    var
       video = document.querySelector('#vid'),
       canvas = document.querySelector('#canvas'),
       context = null,
       btn = $('#btn'),
      


//获取到Canvas对象并设置Canvas和video的宽度和高度。将video和canvas的宽高设置为相同的值,是为了保证我们通过Canvas绘制的图片不会因为与视频的宽高比不一样而发生变形。
       context = canvas.getContext('2d');
       var width =video.width =canvas.width =video.offsetWidth = 320;
       var height =video.height =canvas.height =video.offsetHeight = 180;
       
        
//创建一个getThumb的函数来绘制获取到的视频画面。
        var getThumb = function() {
              context.drawImage(video,0,0,width,height);
         };

        //将getThumb()函数添加到到Button的点击事件中
          btn.click(function() {
             getThumb();
          });
       }
    </script>
    <script src="jquery.js"></script>
  </body>
</html>

通过上诉示例可以看出,获取视频当前帧的画面主要是通过Canvas提供您的drawImage方法来实现的。只要我们将视频对象作为参数传递到该方法中就可以绘制出视频当前帧的画面了。当然如果你想将绘制出的画面转换为图片来使用。可以通过如下代码来实现:

var thumb = new Image();//创建一个Image对象
thumb.src =canvas.toDataURL('image/png');将画布转换为png格式的图片。

对于HTML5新特性在一个叫做秒秒学的教程网站上有详细的讲解课程。它一般都是结合一个具体的小案例来进行讲解的,如果你还不清楚HTML5该怎么用,你可以去看看。

要回复问题请先登录注册