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')
    })
}