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

我有一个包含多个变量的设置，用户可以通过这些变量来改变元素的直观表示。 所有这些都由jquery脚本控制。 如果有一种方法可以根据浏览器的呈现方式保存结果图像，那将会很酷。 它与用户视角下的屏幕捕获没有什么不同，尽管它只捕获相关区域。

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

我更需要提示，以及你们建议我进入这个function的大方向。 我不想学习另一种语言来做这件事，但如果我必须…

Answer 1

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

您可以使用HTML5canvas ，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字符串。 您可以将其发送到您的服务器或在另一个canvas上绘制它：

  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

浏览器中没有内置的JSfunction，可以让您遗憾地将图像转换为HTML。 所以你需要安装一个浏览器插件或扩展程序，它有一个可以调用的JS API。 但即使这样，显然也需要在该人浏览器上安装插件。