隐藏的html视频元素的屏幕截图

Question

我正在尝试使用画布拍摄隐藏元素的屏幕截图，但是图像源为空。

这是我的屏幕截图功能：

function getScreenshot(videoEl) {
    const canvas = document.createElement("canvas");
    canvas.width = videoEl.clientWidth;
    canvas.height = videoEl.clientHeight;
    canvas.getContext('2d').drawImage(videoEl, 0, 0, canvas.width, canvas.height);

    const image = new Image();
    image.src = canvas.toDataURL();

    image.width = canvas.width;
    image.height = canvas.height;

    return image;
}

在我的html文件中，我有这个视频标记

 <video id="video" width="640" height="480" autoplay></video>

和CSS

video {
    display: none;
}

如果我删除了display:none并且视频元素可见，那么图像中就有数据。

我已经进行了很多搜索，但是在此问题上找不到任何东西，因此将不胜感激。

谢谢！