标签：一帧 img 截取 ctx 画布 let querySelector video document
<body>
<video width="200" height="300" controls src="../lijiahui.mp4"></video>
<canvas style="border: solid; opacity: 0; position: absolute;z-index: -1;" width="200" height="300"></canvas>
<button>截图</button>
<button id="pause">暂停并截图</button>
<script type="text/javascript">
let drawing = document.querySelector("canvas");
let ctx = drawing.getContext('2d');
let btn = document.querySelector('button');
let video = document.querySelector('video');
let pauseBtn = document.querySelector('#pause');
btn.onclick = function() {
ctx.drawImage(video, 0, 0, 170, 300);
let img = document.createElement('img');
img.src = ctx.canvas.toDataURL();
console.log(img);
document.body.appendChild(img);
};
pauseBtn.onclick = function(){
video.pause();
ctx.drawImage(video, 100, 0, 170, 300);
let img = document.createElement('img');
img.src = ctx.canvas.toDataURL();
console.log(img);
document.body.appendChild(img);
}
video.onloadeddata = function() {
//这里是音乐加载完后做的事，但不到为毛写在这里不好使。
}
</script>
``
来找我玩啊
标签：一帧,
img,
截取,
ctx,
画布,
let,
querySelector,
video,
document
From： https://blog.51cto.com/u_15964288/6056542