guardar/exportar archivo de imagen desde el contenido html?

Question

Tengo un escenario que, estoy creando contenido html dinámico y necesito exportar/guardar el contenido html a un archivo de imagen con php, jQuery y JavaScript [o con cualquier otro si es posible].

Answer 1

Después de todo lo que he decidido utilizar el código php

GD and Image Functions

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

con esto, tengo creado los elementos html específicos en posiciones específicas con imágenes.

gracias a todos por su contribución.

Answer 2

Puede dibujar el html en un lienzo. https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

y luego guarde el lienzo como una imagen en el servidor. http://motyar.blogspot.com/2010/04/save-html5-canvas-data-as-image.html

O envía html en el servidor y volverlo server-side:

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

Answer 3

Usted puede usar canvas de HTML5 y el método toDataURL. Por ejemplo:

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', ''); 
}; 

Se puede ajustar la parte superior, izquierda, anchura y altura para capturar sólo una parte de la página web.

El resultado es una cadena de URI de datos. Puede enviarlo a su servidor o dibujarlo en otro lienzo:

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); 
    }); 

Su plugin probablemente usa este método. También puedes verificar su código fuente.

Editar: Para enviar a su servidor con jQuery que puede hacer algo así:

$("#send-capture-button").click(function() { 
    $.post("/url-to-send-image-to", {image_data: capture()}) 
}); 

En el lado del servidor que tendrá que decodificar los datos de la URL.

Basado en "Michael Witrant" respuesta vistazo a: Compile/Save/Export HTML as a PNG Image using Jquery

Answer 4

Puse el lienzo y no usé la línea createElement anterior Es probable que necesite agregar esta línea antes de drawWindow() para obtener los permisos de seguridad del usuario. Ver http://murfy.de/read/webgl-drawWindow

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

Si desea guardar la imagen como PNG, etc, me encontré con un guión de utilidad en: http://www.nihilogic.dk/labs/canvas2image/