Captura de pantalla de <body> con html2canvas y almacenar img como JS var

Estoy intentando que los usuarios de mi sitio presionen un botón para tomar una captura de pantalla de la pantalla actual (todo en el cuerpo).Captura de pantalla de <body> con html2canvas y almacenar img como JS var

De mi investigación, html2canvas parece ser un recurso que hace esto posible.

Mi problema es que la documentación no proporciona el código de ejemplo y estoy luchando para controlar los pasos involucrados.

http://html2canvas.hertzen.com/documentation.html

La siguiente cuestión de forma (How to upload a screenshot using html2canvas?) me deja un poco confundido. Solo quiero saber cómo obtener una imagen en este punto.

De su código.

$(window).ready(function(){ 
    ('body').html2canvas(); 
    var canvasRecord = new html2canvas(document.body).canvas; 

    //At this point does the .toDataURL method return a png? 
});

En este punto estoy perdido donde está la imagen, o incluso cómo/cuándo crearla. Me preocuparía enviarlo al servidor más tarde.

Cualquier información apreciada. ¡Gracias! (Html2canvas siquiera necesitan?)

Fuente

2012-05-01 mattyd

Es posible que desee echar un vistazo a la sección de uso de la [archivo readme] (https://github.com/niklasvh/html2canvas/blob/master/readme.md#usage). – 0sh

Quizás también desee considerar algunas de las soluciones de captura de pantalla basadas en fantasma. Mire [en la wiki de PhantomJS] (http://code.google.com/p/phantomjs/wiki/WhoUsesPhantomJS) (busque "captura de pantalla") o considere [este proyecto node.js/phantom] (https: // github .com/fzaninotto/screenshot-as-a-service). –

Como está usando el plugin de jQuery html2canvas, aquí es un fragmento de la muestra

var screenshot; 

$('body').html2canvas({ 
    onrendered: function(canvas) { 
    screenshot = canvas.toDataURL(); 

    //code to process/send the image to server 
    } 
});

En el código anterior fragmento de código crea el html2canvas la captura de pantalla de la página.

También puede usar PhantomJS para crear capturas de pantalla de páginas web, siempre que sean páginas públicas, ya que es posible que no pueda acceder a páginas protegidas de inicio de sesión en el lado del servidor; en tales situaciones, solo funcionará una solución del lado del cliente como html2canvas.

Fuente

2012-12-25 18:20:30

¿puedes ejecutar phantomjs en el lado del cliente? – cantdutchthis

'phantomjs' no es una biblioteca javascript, es un navegador webkit sin la interfaz de usuario. Entonces no puedes ejecutarlo en el lado del cliente. Puede usar servicios como http://usersnap.com para obtener capturas de pantalla de su sitio web/aplicación. –

$("#screenshot").click(function() { 
    $("body").html2canvas({ 
    onrendered: function(canvas) { 
     $(".filt_opt_n").html(canvas); 
     //window.open(img); 
    } 
    }); 
}); 
<div id="screenshot"></div>

.filt_opt_n este es un div que u quieren mostrar la salida de esto está funcionando para mí

Fuente

2013-02-08 07:34:35

puede ser una cuestión de edad. ¡Podrías probar esto!

var htmlCanvas = new html2canvas(document.body); 
var queue = htmlCanvas.parse(); 
var canvas = htmlCanvas.render(queue, { elements: { length: 1} }); 
var img = canvas.toDataURL();

Fuente

2014-12-03 10:31:38

Captura de pantalla de <body> con html2canvas y almacenar img como JS var

Respuesta

Cuestiones relacionadas