crear una captura de pantalla de la página web usando html2canvas (no se puede inicializar correctamente)

Question

Estoy intentando usar http://html2canvas.hertzen.com/ para tomar capturas de pantalla de mi página web. Soy incapaz de inicializar un elemento canvas usando ...

var canvas = $('body').html2canvas(); 

Si yo fuera capaz de obtener una tela adecuada yo seguiría con algo como

var dataUrl = canvas.toDataURL(); //get's image string 
window.open(dataUrl);    // display image 

Por desgracia, la documentación es muy limitado OMI. http://html2canvas.hertzen.com/documentation.html. No creo que necesito para cargar previamente, ya que no estoy usando ningún tipo de gráficos dinámicos (pero ni siquiera estoy haciendo tan lejos de todos modos)

estoy simplemente demasiado novato para entender si este individuo está teniendo éxito con screen capturing using html2canvas

I no parece estar llegando más lejos que este compañero ... How to upload a screenshot using html2canvas?

Mi solución ideal demostraría cómo crear una captura de pantalla con un código mínimo. (. Copia el html a la lona obtener una cadena de toDataURL cadena de salida.)

cualquier penetración es muy apreciada =)

Answer 1

que se debe utilizar de esta manera:

$('body').html2canvas(); 
var queue = html2canvas.Parse(); 
var canvas = html2canvas.Renderer(queue,{elements:{length:1}}); 
var img = canvas.toDataURL(); 
window.open(img); 

Me tomó unas horas a la figura afuera, cómo usarlo de la manera correcta. Se requiere {elements:{length:1}}, debido a la implementación incompleta del complemento; de lo contrario, se producirá un error.

¡Buena suerte!

Answer 2

También puede utilizar el siguiente:

var html2obj = html2canvas($('body')); 

var queue = html2obj.parse(); 
var canvas = html2obj.render(queue); 
var img = canvas.toDataURL(); 

window.open(img); 

Answer 3

para obtener sólo una parte de la página se puede utilizar de esta manera:

$('#map').html2canvas({ 
onrendered: function(canvas) { 
    var img = canvas.toDataURL() 
    window.open(img); 
} 

Answer 4

Esto es lo que funcionó para mí.

html2canvas(document.body, { 
    onrendered: function(canvas) { 
    var img = canvas.toDataURL() 
    window.open(img); 
    } 
}); 

Esto creó una nueva ventana para la captura de pantalla.

Solo quería una parte de mi página en la captura de pantalla, específicamente un contenedor div. Así que hice lo siguiente:

html2canvas($('#myDiv'), { 
    onrendered: function(canvas) { 
    var img = canvas.toDataURL() 
    window.open(img); 
    } 
}); 

Para las personas que buscan la misma pregunta, si las opciones anteriores no ayudan, esperemos que esta voluntad.

Answer 5

Puede usar el siguiente código para capturar una captura de pantalla y descargar la captura de pantalla.

creación de botones html

<button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px; padding:2px 4px 1px 4px" onclick="genScreenshot()"><span class="glyphicon glyphicon-envelope"></span></button> 
<a id="test"></a> 
<div id="box1"></div> 

definición de función

<script type="text/javascript">       
function genScreenshot() { 
html2canvas(document.body, { 
    onrendered: function(canvas) { 
    $('#box1').html(""); 

    if (navigator.userAgent.indexOf("MSIE ") > 0 || 
       navigator.userAgent.match(/Trident.*rv\:11\./)) 
     { 
    var blob = canvas.msToBlob(); 
    window.navigator.msSaveBlob(blob,'Test file.png'); 
    } 
    else { 
    $('#test').attr('href', canvas.toDataURL("image/png")); 
    $('#test').attr('download','screenshot.png'); 
    $('#test')[0].click(); 
    } 


    } 
}); 
} 
</script> 

nota: He creado un botón html donde yo he llamado la función. test es un atributo y box1 es para obtener los elementos de lienzo.