使用 Javascript 的屏幕截图，包括视频标签答案

【问题标题】：Screen capture using Javascript, including video tag使用 Javascript 的屏幕截图，包括视频标签
【发布时间】：2018-10-20 18:21:57
【问题描述】：

我有一个包含 html 元素和视频标签的网页。我想只使用 javascript/jquery/第三方插件来截取页面的屏幕截图。

我已经尝试过HTML2Canvas，它适用于 html 元素。它不捕获视频标签。

我已经尝试使用画布代码来捕获视频标签，使用以下代码：

function drawImage() {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var width = $('#video').outerWidth();
  var height = $('#video').outerHeight();
  canvas.width = width;  canvas.height = height;
  var elemVideo = document.getElementById('video');
  context.drawImage(elemVideo, 0, 0, width, height);
  var dataURL = canvas.toDataURL();

  var image = new Image();
  image.src = dataURL;

  $('body').append(image); 
}

此代码截取视频。

是否可以在不使用任何后端服务的情况下截取整个屏幕？

【问题讨论】：

标签： javascript html5-canvas html5-video screenshot html2canvas

【解决方案1】：

这是你可以尝试的。

构建一个隐藏的渲染元素（如镜像 DOM）——这有点像许多 HTML5 游戏库所做的。

渲染元素被隐藏。将页面内容复制到呈现元素中。

然后使用您的代码渲染视频，并在渲染元素中将视频标签替换为您的视频图像。然后仅在该呈现元素上使用 HTLM2Canvas，因为 HTML2Canvas 允许您仅截取页面的一部分。

【讨论】：