Question

我有一个网页，其中包含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); 
}

此代码会截取视频。

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

Answer 1

这是你可以尝试的东西。

构建隐藏的渲染元素（如镜像DOM） - 它有点像许多HTML5游戏库所做的那样。

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

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

使用Javascript进行屏幕截图，包括视频代码

1 个答案: