web實戰：video結合canvas實現視頻在線截圖

給你們講解下我前幾天看到的一個有趣小demo：視頻在線截圖。如下是我修改和添加了新功能後的效果圖：

是否是很酷，其實挺簡單的，下面就給你們講講怎麼弄哈。

這裏主要分爲三大塊功能，首先是第一個：

利用URL對象獲取視頻連接並展現：

js的URL對象有個createObjectURL方法，它能夠獲取一個文件（File對象）的url，而後插入到video元素的src特性中，這樣就能夠實現視屏的展現了。固然如何獲取File對象呢，方法有種，好比使用input元素，或者使用拖動的方式。一個完整的代碼段：

<input type="file"/>
複製代碼

document.querySelector('input[type="file"]').addEventListener('change',function () {
    document.querySelector('video').src = window.URL.createObjectURL(this.files[0])
})複製代碼

固然源碼中我並非這樣寫的，僅僅是爲了給你們一個演示而已。關於URL更加具體的使用，你們能夠看看這篇文章或者MDN。

利用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();
});複製代碼

恩恩，主要的代碼部分到這就講完啦，固然具體的實現還有不少細節上的問題以及其餘的功能可能沒有展現，我就不一一說明了，具體的你們看完源碼後能夠再提問。

下面是個人源碼地址，你們能夠試試哈：

在github上的demo

還有就是我參考的那片文章。