creare uno screenshot della pagina Web utilizzando html2canvas (impossibile inizializzare correttamente)

Question

Sto tentando di utilizzare http://html2canvas.hertzen.com/ per acquisire schermate della mia pagina web. Sono in grado di inizializzare un elemento canvas utilizzando ...

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

Se fossi in grado di ottenere una tela corretta avrei seguito con qualcosa di simile

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

Purtroppo, la documentazione è molto limitata IMO. http://html2canvas.hertzen.com/documentation.html. Non credo che ho bisogno di precaricare come io non sto usando qualsiasi grafica dinamica (ma non sto anche ottenere che lontano comunque)

sto semplicemente troppo niubbo per capire se questo ragazzo sta avendo successo con screen capturing using html2canvas

I non sembra essere più lontano di questo individuo .. How to upload a screenshot using html2canvas?

La mia soluzione ideale dimostrerebbe come creare screenshot con codice minimo. (. Copia html su tela ottenere stringa toDataURL stringa di output.)

Tutta la comprensione è molto apprezzato =)

Answer 1

si dovrebbe usare in questo modo:

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

Ci ho messo poche ore per capire fuori, come usarlo nel modo giusto. È necessario il {elements:{length:1}}, a causa di un'implementazione incompleta del plugin, altrimenti si otterrà un errore.

Buona fortuna!

Answer 2

si potrebbe anche utilizzare il seguente:

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

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

window.open(img); 

Answer 3

per ottenere solo una parte della pagina è possibile utilizzare in questo modo:

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

Answer 4

Questo è ciò che ha funzionato per me.

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

Questo ha creato una nuova finestra per lo screenshot.

Volevo solo una parte della mia pagina nello screenshot, in particolare un contenitore div. Così ho fatto la seguente:

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

per chi cerca la stessa domanda, se le opzioni di cui sopra non aiutano, spero che questo.

Answer 5

È possibile utilizzare il seguente codice per catturare uno screenshot e scaricare lo screenshot.

creazione del pulsante 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> 

definizione di funzione

<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: Ho creato un pulsante HTML dove ho chiamato la funzione. test è un attributo e box1 serve per ottenere gli elementi canvas.