使用canvas实现video视频截图

需求描述：在视频组件上实现一个截图的功能按钮，可以对当前视频画面进行截图，截图像素尺寸可自定义。
实现方法：使用canvas的drawImage生成图片；使用canvas.toDataURL生成图片链接；创建a标签，模拟点击下载。
开发环境：vue3+vite+ts

编码实现

1、初始化canvas

const canvasRef = ref<HTMLCanvasElement>();  
let ctx: CanvasRenderingContext2D;  
  
// 初始化canvas  
const initCanvas = () => {  
ctx = (canvasRef.value as any).getContext('2d') as CanvasRenderingContext2D;  
};  
onMounted(() => {  
initCanvas();  
});

2、使用a标签下载

const myDownload = (url: string, name: string) => {  
const dom = document.createElement('a');  
dom.href = url;  
dom.setAttribute('download', name);  
dom.click();  
};

3、调用canvas Api

const capture = async () => {  
const video = flvVideoRef.value as HTMLVideoElement;  
const width = 1280;  
const height = 720;  
if (canvasRef.value) {  
canvasRef.value.width = width;  
canvasRef.value.height = height;  
ctx.drawImage(video, 0, 0, width, height);  
const imgUrl = canvasRef.value.toDataURL('image/png');  
  
const fileName = '';  
myDownload(imgUrl, fileName);  
}  
};