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

Question

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

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

我更多的是寻求提示，以及你们建议我去追求这样的功能的总体方向。我不想学习另一种语言来做到这一点，但如果我必须......

Answer 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 以仅捕获网页的一部分。

结果是一个 数据 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 进行解码。

Answer 2

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