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

Question

我有一个场景，我正在创建动态html内容，我需要导出/保存html内容到一个图像文件与PHP，jQuery和JavaScript [或任何其他如果可能]。

Answer 1

毕竟我已经决定使用的代码 PHP

GD and Image Functions

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

与此， 我有在图像的特定位置创建特定的html元素。

谢谢大家的贡献。

Answer 2

您可以将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/

Answer 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。

基于 “迈克尔Witrant” 答案 看看： Compile/Save/Export HTML as a PNG Image using Jquery

Answer 4

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

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

如果你想将图像保存为PNG等，我发现在一个有用的脚本： http://www.nihilogic.dk/labs/canvas2image/