怎么在video中使用canvas截图视频

这篇文章将为大家详细讲解有关怎么在video中使用canvas截图视频，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

利用canvas实现视频截图：

接下来就是关键步骤了，但也很简单，那就是使用 canvas 的 drawImage 方法，大家如果翻到高程三的第15.2.6节，就会发现 drawImage 的方法的使用描述得非常详细，但漏讲了一个，那就是 video 元素也可传入 drawImage 方法中，并且绘制图形。具体代码段：

var canvas = document.createElement("canvas");var canvasCtx = canvas.getContext("2d");var video=document.querySelector('video');//坐原图像的x,y轴坐标，大小，目标图像的x，y轴标，大小。canvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);//把图标base64编码后变成一段url字符串var dataUrl = canvas.toDataURL("image/png");//插入图片得src特性中document.createElement('img').src=dataUrl;

绘制完成图像后，再调用 canvas 的 toDataURl 方法把图像变成 base64 编码的url，就可插入到 img 元素中展示，一个缩略的图的制作便完成了。关于图片和base64的关系，具体的同学们可以看下这篇文章。

实现动画效果：

该动画实现的主要原理是：先在视频原处创建一张大小和视频一致的大图片，设置为绝对布局（ position:absolut ），在实际放置缩略图处创建一张小图片，设置为不可见（ visibility：hidden ），然后大图片通过 left 和 top 实现位移， width 和 height 实现缩小，至实际放置缩略图处，并形成动画效果。最后大图片删除，小图片显示即可。具体代码段：

function getOffset(elem) {    var pos = {x: elem.offsetLeft, y: elem.offsetTop};    var offsetParent = elem.offsetParent;    while (offsetParent) {        pos.x += offsetParent.offsetLeft;        pos.y += offsetParent.offsetTop;        offsetParent = offsetParent.offsetParent;    }    return pos;}

该函数是获取小图片距viewport（视口）的距离，并提供给大图片作为位移参数的，高程三的12.2.3节有段几乎一模一样的代码，并附有详细说明，以及替代方案 getBoundinGClientRect 函数也有提到，具体的大家翻书看看哈。

下面的代码便是创建大图片和小图片并实现动画效果了。为了方便易懂，我这儿使用了Jquery

var $imgBig = $("<img/>");//设置大图片的初始位置，就是原视频处。$imgBig.CSS({    position: "absolute",    left: video.offsetLeft,    top: video.offsetTop,    width: video.offsetWidth+ "px",    height: video.offsetHeight+ "px"}).attr("src", dataUrl);var $img = $("<img/>");$img.hide();//获取小图片的距离参数，实现大图片的动画效果。var offset = getOffset($img[0]);//添加动画效果$imgBig.animate({    left: offset.x + "px",    top: offset.y + "px",    width: $img.width() + "px",    height: $img.height() + "px"}, 500, function () {    $img.show();    $imgBig.remove();});

关于怎么在video中使用canvas截图视频就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。