用于截屏的 Firefox 插件 API

Question

我正在寻找 Firefox 插件 api 来截取文档可见区域的屏幕截图。

Chrome 和 Safari 有 api 来实现这一点。他们非常快。
我找不到任何特定于 Firefox 的东西。

我在 How do I use the canvas drawWindow function in an addon created using the addon sdk? 找到了解决方法但此解决方案采用滚动屏幕截图，包括(文档的隐藏部分)。此解决方案有 2 个问题；

1-如果页面有长滚动，完成截图过程需要很长时间。因为它使用基于 Canvas 的绘图。

2-我想获取文档可见区域的屏幕截图，而不是整个文档。

有什么解决方法吗？

谢谢。

Answer 1

使用 SDK，您可以执行以下操作:

const { window: { document } } = require('sdk/addon/window');
const { getTabContentWindow, getActiveTab } = require('sdk/tabs/utils');
const { getMostRecentBrowserWindow } = require('sdk/window/utils');

const canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
document.documentElement.appendChild(canvas);

function captureTab(tab=getActiveTab(getMostRecentBrowserWindow())) {
  let contentWindow = getTabContentWindow(tab);

  let w = contentWindow.innerWidth;
  let h = contentWindow.innerHeight;
  let x = contentWindow.scrollX;
  let y = contentWindow.scrollY;

  canvas.width = w;
  canvas.height = h;

  let ctx = canvas.getContext('2d');

  ctx.drawWindow(contentWindow, x, y, w, h, '#000');
  return canvas.toDataURL();
}

那应该只占用可见区域。默认情况下，它会抓取事件选项卡，但您可以传递任何其他选项卡——因为它被设计为低级 API，它需要一个原生选项卡，而不是 SDK 选项卡。
您可以放入一个模块并仅导出 captureTab功能。

编辑:e10s 版本

正如 Ian Bicking 在评论中指出的那样，上面的代码目前与带有 e10s 的 Firefox 不兼容。解决此问题的一种简单方法是在我们要捕获屏幕截图的同一文档和内容进程中创建一个临时 Canvas :

const { getTabContentWindow, getActiveTab } = require('sdk/tabs/utils');
const { getMostRecentBrowserWindow } = require('sdk/window/utils');

function captureTab(tab=getActiveTab(getMostRecentBrowserWindow())) {
  let contentWindow = getTabContentWindow(tab);
  let { document } = contentWindow;

  let w = contentWindow.innerWidth;
  let h = contentWindow.innerHeight;
  let x = contentWindow.scrollX;
  let y = contentWindow.scrollY;

  let canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');

  canvas.width = w;
  canvas.height = h;

  let ctx = canvas.getContext('2d');

  ctx.drawWindow(contentWindow, x, y, w, h, '#000');

  let dataURL = canvas.toDataURL();

  canvas = null;

  return dataURL;
}

这适用于 e10s 和非 e10s FF 版本；与前一个相比的缺点是每次我们想要截屏时都创建一个 Canvas ，但我认为是可以接受的。