[TOC] ## 從視頻中獲取圖片 創建一個獲取圖片的按鈕，創建一個放圖片的div ``` <div> <video autoplay playsinline id="player"></video> </div> <div> <button id="snapshot">Take snapshout</button> </div> <div> <canvas id="picture"></canvas> </div> ``` 獲取圖片按鈕的元素，和放置圖片的元素 ``` //picture var snapshot = document.querySelector('button#snapshot'); var picture = document.querySelector('canvas#picture'); picture.width = 320; picture.height = 240; ``` 添加按鈕點擊事件 ``` snapshot.onclick = function () { //------拍下來的圖片和視頻一樣加上了特效 picture.className = filtersSelect.value; picture.getContext('2d').drawImage(vidoeplay, 0,0, picture.width, picture.height) } ```