上传视频用canvas绘制获取封面

Question

问题描述

上传视频用canvas绘制获取封面，使用toDataURL()转base64报错：dynamic.vue?8ee6:212 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

问题出现的环境背景及自己尝试过哪些方法

百度了很多都说是跨域问题，尝试加了
video.crossOrigin = 'anonymous'

相关代码

粘贴代码文本（请勿用截图）

this.captureImage(图片url地址)

captureImage(url) {
    let _this = this
    this.$nextTick(()=>{
        let video = _this.$refs.upvideo;

        let source = document.createElement("source");
        source.src = url;
        source.type = "video/mp4";
        video.appendChild(source);

        let canvas = _this.$refs.mycanvas;
        video.oncanplay = () =>{

            setTimeout(() => {
                canvas.width = "320";
                canvas.height = "320";
                canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height);
                let imgsrc = canvas.toDataURL("image/png");
            }, 1000);

        }

    })
    },

你期待的结果是什么？实际看到的错误信息又是什么？

想实现上传视频保存封面图片

Answer 1

上传视频？上传的话，是本地文件，不存在跨域问题。

crossOrigin 这个需要服务端先支持，然后才可以使用。如果是服务端后来支持过了，那么需要清除一下缓存。