Question

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

Chrome和Safari已经实现了这一目标。它们非常快。我找不到任何针对firefox的内容。

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

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

Answer 2

你假设在带有画布的Firefox上截图显然是慢的。

我做了几个屏幕截图，Firefox / canvas比Chrome / captureVisibleTab更快。

实际上，Firefox更适合尽可能快的截图，因为它的画布向mozFetchAsStream方法公开了特权代码，允许绕过实际的瓶颈，即图像数据的base64编码。 / p>

一些数字

Chrome：captureVisibleTab 200-205ms
Firefox：drawImage 20-25ms + toDataURL 125-130ms

devtools screenshot命令是a good example如何捕获可见部分

平心而论，要进行有意义的比较，必须考虑Chrome的PNG编码器是否有利于压缩速度。尽管如此，这并没有改变Firefox的画布很好的事实。

编辑：好的， base64编码备注是愚蠢的，我不知道我在想什么。也许我应该写的是Firefox的画布不仅速度快，而且功能多样。

Firefox Addon API用于截屏

2 个答案: