video结合canvas实现视频在线截图功能

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();
});

 

恩恩，主要的代码部分到这就讲完啦，当然具体的实现还有很多细节上的问题以及其他的功能可能没有展示，我就不一一说明了，具体的大家看完源码后可以再提问。

下面是我的源码地址，大家可以试试哈：

在github上的demo

总结

以上所述是小编给大家介绍的video结合canvas实现视频在线截图功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！