主要思路
1. 播放視頻：html的video標(biāo)簽
2. 使用html的canvas標(biāo)簽來(lái)實(shí)現(xiàn)圖片的繪制
3. 將圖片轉(zhuǎn)成base64，然后使用html的a標(biāo)簽實(shí)現(xiàn)保存下載
代碼是vue框架里面直接剪切過(guò)來(lái)的
screenshot() {
const canvas = document.createElement("canvas"); // 創(chuàng)建canvas 用來(lái)截圖
// const video = document.getElementById("video"); // 創(chuàng)建video 用來(lái)存放被截圖的視頻
const video = this.$refs.video;
const a = document.createElement("a");
// const a = document.getElementById("a"); // 用來(lái)自動(dòng)下載圖片保存到本地
// video.setAttribute("crossOrigin", "anonymous"); // 支持跨域
canvas.width = video.clientWidth;
canvas.height = video.clientHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const filename = "file_" + new Date().getTime() + ".png";
a.setAttribute("download", filename);
a.href = canvas.toDataURL("image/png");
a.click();
},
<video
ref="video"
id="video"
:autoplay="autoplay"
x5-playsinline
playsinline
webkit-playsinline
muted
>
您的瀏覽器不支持 video 標(biāo)簽。
</video>
<div class="controls" @click.stop>
<svg-icon class="jietu" icon-class="jietu" @click="screenshot" />
</div>
