dom-to-image 在尝试从静止视频捕获缩略图时会生成错误的图像

Question

我第一次使用 dom-to-image。 我想从使用 HTML5 视频标签显示的静止视频中捕获缩略图。

我使用的代码紧密基于 github 上提供的示例。

我正在测试的视频是短 MP4 文件，可以在 Chrome 浏览器中正常显示和播放。

它可以工作，但生成的用于下载的图像有错误。图像的大部分特征都丢失了。

处理视频显示的 PHP 看起来像这样..

echo '<video  id="my-node"  width="640" height="480" controls>';
    echo '<source src="'.  $result_video_URL     .'" type="video/mp4">';
    echo 'Your browser does not support the video tag.';
echo '</video>';

我在测试时可以使用简单的点击文本..

echo '<div id="grab_thumb" > ' . "<H3>Grab Current Still</H3></div> ";

JavaScript 看起来像这样...

(function($) {
    "use strict";
    $(document).ready(function() {
        $(' #grab_thumb').on('click', function() {
            var node = document.getElementById('my-node');
            domtoimage.toJpeg(document.getElementById('my-node'), {
                    quality: 0.95
                })
                .then(function(dataUrl) {
                    var link = document.createElement('a');
                    link.download = 'my-image-name.jpeg';
                    link.href = dataUrl;
                    link.click();
                });
        });
    });
})(jQuery);

当我点击 ID 为“grab_thumb”的文本时，会生成图像供下载，并且下载正常。 然而，我看到的不是静止视频上出现的图像，而是带有灰色矩形背景的图像，该图像与视频帧以及视频底部播放栏中出现的一些项目相匹配。但大部分细节都缺失了。

我使用的是最新版本的 Google Chrome，网站是 WordPress。

我已经进行了多次搜索（在 Stackoverflow 上以及更广泛的范围内），但找不到任何看起来直接相关的内容。

Answer 1

我知道我之前应该检查一下，但我发现该软件可以在 Firefox 上运行。
当我检查 Chrome 显示屏时，它充满了 Chrome 生成的额外用户代理 CSS，我怀疑这可能是问题所在，但在这种情况下如何抑制它？