您好,登录后才能下订单哦!
这篇文章将为大家详细讲解有关怎么在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截图视频就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。