Firefox Addon API用于截屏

Question

我正在寻找firefox addon api来截取文档的可见区域.

Chrome和Safari都有实现此目的的api.它们非常快.我找不到任何针对firefox的内容.

我找到了一个解决方法,如何在使用addon sdk创建的插件中使用canvas drawWindow函数？但是这个解决方案采用包含滚动的整页截图(包括文档的隐藏部分).这个解决方案有两个问题;

1-如果页面有长滚动,则需要很长时间才能完成屏幕截图过程.因为它使用的是基于画布的绘图.

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.解决此问题的一种简单方法是在我们想要捕获屏幕截图的同一文档和内容过程中创建临时画布:

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和no-e10s FF版本; 与前一个相比的缺点是每次我们想要截取屏幕时创建一个画布,但我认为是可以接受的.