vue3 获取视频第一帧并且保存为图片

<video id="videoPlay" v-if="videoForm.video !=='' && videoFlag === false" :src="videoForm.video" class="avatar" style="width: 200px;height: 200px" crossorigin="anonymous" controls="controls">您的浏览器不支持视频播放</video>

// 注意：标签中 crossorigin="anonymous" 没有设置这东西可能导致代码段，state.videoImg = canvas.toDataURL("image/jpeg") 报错，显示跨域 
报错信息：Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.


// 注意：配置成功后上传没问题了可能一样会报错，
报错信息：Access to video at 'http://www.xxxxx.com:13881/resource/financial/8DADA6F8576FE1232A466CBCD79C1563.mp4' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

import { nextTick} from 'vue'
// 注意：vue3中使用 nextTick 要手动引入

// 注意方法使用时间既可以
// 获取视频第一帧并且保存为图片
const findVideoCover = () => {
    nextTick(()=> {
        let size = 160
        const video = document.getElementById('videoPlay')
        // debugger
        debugger
        video.width = size
        video.height = size
        video.currentTime = 1
        const canvas = document.createElement('canvas')
        canvas.width = size
        canvas.height = size
        canvas.getContext('2d').drawImage(video, 0, 0, video.height, video.width)
        state.videoImg = canvas.toDataURL("image/jpeg")
        uploadFile_base64({imageBase64: state.videoImg, fileName: ''}).then(res=> {
            console.log(state.url + res.data.url)
        })
        console.log(state.videoImg, 'canvas')
    })
}