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

Question

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

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

我更需要提示,以及你们建议我进入以实现这些功能的大方向.我不想学习另一种语言来做这件事,但如果我必须...

Answer 1

编辑:此方法仅适用于Firefox扩展.

您可以使用HTML5画布,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.