从 html 内容保存/导出图像文件？答案

【问题标题】：save/export image file from html content?从 html 内容保存/导出图像文件？
【发布时间】：2012-02-22 22:49:07
【问题描述】：

我有一个场景，我正在创建动态 html 内容，我需要使用 php、jQuery 和 JavaScript [或者如果可能的话] 将 html 内容导出/保存到图像文件中。

【问题讨论】：

您好，欢迎来到 stackoverflow。您是在谈论在图像文件中编写一些文本（在这种情况下是 html 页面的源代码）吗？一般来说，使用 PHP 是可能的。
如果您的意思是呈现 HTML，这并不是一项简单的任务...也许有关该问题的更多信息会有所帮助？也许有更好的方法来实现您的最终目标。
您想将 html 内容保存到这样的图像文件（jpg/png）中吗？你能说清楚吗
stackoverflow.com/questions/5941631/…

【解决方案1】：

我自己放了画布，上面没有使用createElement这一行您可能需要在drawWindow() 之前添加此行以从用户那里获得安全权限。见http://murfy.de/read/webgl-drawWindow

netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');

如果您想将图像保存为 PNG 等格式，我在以下位置找到了一个有用的脚本： http://www.nihilogic.dk/labs/canvas2image/

【讨论】：

【解决方案2】：

毕竟我决定使用代码 php

GD 和图像函数

http://php.net/manual/en/ref.image.php

有了这个，我已经用图像在特定位置创建了特定的 html 元素。

感谢大家的贡献。

【讨论】：

【解决方案3】：

您可以使用 HTML5 画布和 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', '');
};

您可以调整顶部、左侧、宽度和高度以仅捕获网页的一部分。

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

基于“Michaël Witrant”的回答看着： Compile/Save/Export HTML as a PNG Image using Jquery

【讨论】：

感谢您的回复！ [不习惯 wid canvas] 我在测试文件中检查这个脚本，为此我在顶部包含了 js 文件。 [取自 w3s 示例]
Uncaught TypeError: Object # has no method 'drawWindow' - chrome 中的错误。
请确保您使用的版本支持 HTML5，建议您可以尝试使用带有 firebug 的 Firefox 9 进行调试，抱歉我没有时间为您测试
看看这个：developer.mozilla.org/en/DOM/CanvasRenderingContext2D
这不是 HTML5 标准功能，它仅在 Firefox 中可用。见developer.mozilla.org/en-US/docs/Web/API/…

【解决方案4】：

您可以将 html 绘制到画布上。 https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

然后将画布作为图像保存到服务器。 http://motyar.blogspot.com/2010/04/save-html5-canvas-data-as-image.html

或者将html发送到服务器并渲染server-side：

https://github.com/visionmedia/screenshot-app 或 http://cutycapt.sourceforge.net/

【讨论】：