<video
style="width: 200px; height: 200px"
id="videoElement1"
muted
autoplay
src="@/assets/movie.mp4"
></video>
<span @click="snapshot(0)"
><i
><img
:src="snapshotImg"
style="width: 1vw"
/>截图</i
></span
>
<canvas style="display: none; width: 28vw; height: 24vw"></canvas>
snapshot(order) {
var video = document.querySelectorAll("video")[order]; //获取前台要截图的video对象,
var canvas = document.querySelectorAll("canvas")[order]; //获取前台的canvas对象,用于作图
var ctx = canvas.getContext("2d"); //设置canvas绘制2d图,
ctx.drawImage(video, 0, 0, canvas.width, canvas.height); //将video视频绘制到canvas中
var images = canvas.toDataURL("image/png"); //canvas的api中的toDataURL()保存图像
},