受污染的画布不允许导出，但匿名交叉原点也会破坏它

Question

我尝试使用以下方法从外部源获取视频的第一帧：

function convertVideo(vidSrc) {
    var vid = $('<video src="' + vidSrc + '" preload="metadata" controls style="width: 300px; height: 160px;"></video>')[0];
    vid.load();
    var img;
    vid.onloadedmetadata = function() {
        var cvs = $('<canvas />').attr({ width: 300, height: 160})[0];
        $('.associate-list-container').append(vid);
        try {
            $('.associate-list-container').append(cvs);

            setTimeout(function() {
                cvs.getContext('2d').drawImage(vid, 0, 0, 300, 160);
                img = $('<img/>').attr({src: cvs.toDataURL()})[0]; 
            },100);
        } catch (e) {
            console.log(e);
        }

    }

    return img;
}

这种方法正在发生一些事情：

1. 当我按原样加载视频时，它可以工作，但是当我尝试将画布绘图导出到图像时，它会给我一个安全错误。我尝试过广为人知的解决方案，将crossOrigin属性设置为视频的Anonymous，但这会导致视频完全消失。我认为与视频消失相关的错误是没有有效的来源。
2. 您可以看到超时延迟画布的绘制。出于某种原因，如果没有超时，画布将保持为空，并且创建的图像为空。我认为这是因为视频尚未加载，这很奇怪，因为它应该在onloadedmetadata函数中完全加载。