Compilar/Guardar/Exportar HTML como una imagen PNG usando Jquery

Question

Tengo una configuración con múltiples variables que los usuarios pueden alterar ese efecto una representación visual de un elemento. Todo esto está controlado por scripts jquery. Sería genial si hubiera una manera de guardar la imagen resultante según lo que el navegador representa. No sería diferente de una captura de pantalla desde la perspectiva del usuario, aunque solo capturaría el área relevante.

Tengo un complemento para FF llamado Page Saver, y su funcionalidad es más o menos lo que estoy buscando, pero con jquery o javascript normal si es posible.

Estoy pidiendo más consejos, y una dirección general que ustedes me aconsejarían entrar para buscar dicha funcionalidad. Preferiría no aprender otro idioma para hacer esto, pero si debo ...

Answer 1

Editar: Este método solo funciona en las extensiones de Firefox.

Puede usar HTML5 canvas, Firefox 'drawWindow 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', ''); 
}; 

Puede ajustar top, left, width y height para capturar sólo una parte de la página web.

El resultado es una cadena data URI. 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.

Answer 2

No hay una funcionalidad JS integrada en los navegadores que te permita convertir una imagen en HTML tristemente. Por lo tanto, necesitaría algo como un complemento de navegador o una extensión instalada que tenga una API JS a la que pueda llamar. Pero incluso entonces, obviamente requeriría que ese complemento se instale en el navegador de esa persona.