[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) } ```