使用（？）语言将元素的内容绘制到画布元素/捕获网站作为图像

Question

我问了一个关于从 HTML 编译图像文件的问题。 Michaël Witrant 回复并告诉我有关 canvas 元素和 html5 的信息。

我在网上查看过，但是我没有找到任何有关将杂项元素的内容绘制到画布上的内容。这可能吗？

例如，假设我有一个带有背景图像的 div。有没有办法让这个元素及其背景图像“到”画布上？我问这个问题是因为我找到了一个脚本，允许将画布元素保存为 PNG，但我真正想做的是将 DOM 元素集合保存为图像。

编辑

无论什么语言，只要它能工作，我都愿意尝试。

Answer 1

郑重声明，drawWindow 仅适用于 Firefox。

该代码只能在本地运行，不能在互联网上运行，使用带有外部元素的drawWindow会产生安全异常。

在我们回答其他问题之前，您必须向我们提供更多背景信息。

Answer 2

http://cutycapt.sourceforge.net/

CutyCapt 是一个命令行实用程序，使用 Webkit 将 HTML 渲染为 PNG 、PDF、SVG 等。您需要以某种方式与它交互（例如 PHP 中的 shell_exec），但它非常强大。站点的呈现方式与 Webkit 浏览器中的呈现方式完全相同。

我没有专门使用过 CutyCapt，但我强烈推荐它。我也使用过一款名为 WkHtmlToPdf 的类似产品，就我个人的体验而言，该产品非常棒。

Answer 3

经过多次尝试使用 drawWindow 参数绘制错误的部分或元素后，我设法通过两个步骤处理来完成此操作：首先在画布中捕获整个页面，然后在另一个画布中绘制该画布的一部分。

这是在 XUL 扩展中完成的。由于安全原因，drawWindow 无法在其他浏览器中工作，并且可能无法在非特权上下文中工作。

function nodeScreenshot(aSaveLocation, aFileName, aDocument, aCSSSelector) {
  var doc = aDocument;
  var win = doc.defaultView;
  var body = doc.body;
  var html = doc.documentElement;

  var selection = aCSSSelector
    ? Array.prototype.slice.call(doc.querySelectorAll(aCSSSelector))
    : [];

  var coords = {
    top: 0,
    left: 0,
    width: Math.max(body.scrollWidth, body.offsetWidth, 
                      html.clientWidth, html.scrollWidth, html.offsetWidth),
    height: Math.max(body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight)

  var canvas = document.createElement("canvas");

  canvas.width = coords.width;
  canvas.height = coords.height;

  var context = canvas.getContext("2d");
  // Draw the whole page
  // coords.top and left are 0 here, I tried to pass the result of
  // getBoundingClientRect() here but drawWindow was drawing another part,
  // maybe because of a margin/padding/position ? Didn't solve it.
  context.drawWindow(win, coords.top, coords.left,
                     coords.width, coords.height, 'rgb(255,255,255)');

  if (selection.length) {
    var nodeCoords = selection[0].getBoundingClientRect();
    var tempCanvas = document.createElement("canvas");
    var tempContext = tempCanvas.getContext("2d");

    tempCanvas.width = nodeCoords.width;
    tempCanvas.height = nodeCoords.height;
    // Draw the node part from the whole page canvas into another canvas
    // void ctx.drawImage(image, sx, sy, sLargeur, sHauteur,
                                 dx, dy, dLargeur, dHauteur)
    tempContext.drawImage(canvas,
      nodeCoords.left, nodeCoords.top, nodeCoords.width, nodeCoords.height,
      0, 0, nodeCoords.width, nodeCoords.height);

    canvas = tempCanvas;
    context = tempContext;
  }

  var dataURL = canvas.toDataURL('image/jpeg', 0.95);
  return dataURL;
}