使用 Jquery 将 HTML 编译/保存/导出为 PNG 图像答案

【问题标题】：Compile/Save/Export HTML as a PNG Image using Jquery使用 Jquery 将 HTML 编译/保存/导出为 PNG 图像
【发布时间】：2011-08-21 22:45:26
【问题描述】：

我有一个包含多个变量的设置，用户可以更改这些变量以影响元素的视觉表示。所有这些都由 jquery 脚本控制。如果有一种方法可以根据浏览器呈现的内容保存结果图像，那就太酷了。从用户的角度来看，它与屏幕截图没有什么不同，尽管它只会捕获相关区域。

我有一个名为 Page Saver 的 FF 插件，它的功能几乎就是我想要的，但如果可能的话，使用 jquery 或常规 javascript。

我更多的是寻求提示，以及你们建议我为追求此类功能而采取的一般方向。我不想学习另一种语言来做到这一点，但如果我必须......

【问题讨论】：

标签： jquery screenshot capture

【解决方案1】：

编辑：此方法仅适用于 Firefox 扩展。

您可以使用HTML5 canvas、Firefox 的drawWindow 和toDataURL 方法。例如：

var capture = function() {
  var root = document.documentElement;
  var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'html:canvas');
  var context = canvas.getContext('2d');
  var selection = {
    top: 0,
    left: 0,
    width: root.scrollWidth,
    height: root.scrollHeight,
  };

  canvas.height = selection.height;
  canvas.width = selection.width;

  context.drawWindow(
    window,
    selection.left,
    selection.top,
    selection.width,
    selection.height,
    'rgb(255, 255, 255)'
  );

  return canvas.toDataURL('image/png', '');
};

您可以调整top、left、width 和height 以仅捕获网页的一部分。

结果是一个data URI 字符串。您可以将其发送到您的服务器或在另一个画布上绘制：

  var canvas = document.getElementById('captured');
  var ctx = canvas.getContext('2d');
  var image = new Image();
  image.src = capture();

  // the image is not immediately usable
  $(image).load(function() { // jquery way
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);
  });

您的插件可能使用了这种方法。你也可以查看它的源代码。

编辑：要使用 JQuery 将其发送到您的服务器，您可以执行以下操作：

$("#send-capture-button").click(function() {
  $.post("/url-to-send-image-to", {image_data: capture()})
});

在服务器端，您必须对数据 URL 进行解码。

【讨论】：

哇，我会玩这个，看看我是否不能让它做我需要的事情。感谢您非常深入的回答！这使用 HTML5，所以只有较新的浏览器才能使用这样的功能？
可以查看caniuse.com/#search=canvas但是不知道“画布基础支持”是否包含这个方法。
我花了一段时间才准备好实施这个脚本。我不确定如何实现它，如何触发图像创建，以及生成的图像会显示在哪里？
你能澄清一下我需要什么 html 结构吗？
您不需要任何 HTML 结构（除非您想使用在文档上绘制图像的示例，那么您需要在页面的某处使用 <canvas id="captured"/>）。我添加了一个示例以将图像发送到您的服务器。

【解决方案2】：

浏览器中没有内置的 JS 功能可以让您遗憾地将图像转换为 HTML。因此，您需要安装浏览器插件或扩展程序之类的东西，其中包含可以调用的 JS API。但即便如此，显然也需要在该人的浏览器上安装该插件。

【讨论】：