html2canvas Tutorial?

Question

Mi piacerebbe usare html2canvas ma non ho idea di come.

Senza offesa per Hertzen, ha creato una sceneggiatura fantastica, ma la documentazione è incompleta quindi è piuttosto inutile.

Ho guardato JSFeedback ma l'intero script (che dovevo "rubare" dal codice HTML) funziona solo con la sua versione di html2canvas che, nei commenti, dice che non è pronta per l'open-sourceness.

Qualsiasi aiuto sarà veramente apprezzato - Apparatix.

Answer 1

html2canvas prende praticamente tutto nell'oggetto DOM specificato - tutti i bambini, i loro figli, ecc. - e li replica in un oggetto Canvas (trovato nella variabile canvas passato alla funzione) in base alle loro varie caratteristiche, compresi i bordi, i contenuti, stili, ecc canvas.toDataURL() converte il contenuto di quella tela ad un flusso di caratteri che rappresentano un'immagine che può essere utilizzato come src in un tag, ovvero

<img src=imgdataurl> 

o l'impostazione un'immagine di sfondo tramite javascript/jquery, come questo -

$('#someDiv').css('background-image','url('+imgdataurl+')') 

Se non sta funzionando per te, potrebbe essere che tu stia specificando un elemento DOM genitore errato - puoi provare $ ('body') invece di $ ('# myObj') e vedere se qualcosa viene fuori.

Answer 2

Dare a questo un vortice -

Nel vostro index.html, aggiungere i seguenti file javascript:

<script type="text/javascript" language="javascript" src="js/jquery.js"> 
</script> 
<script type="text/javascript" language="javascript" src="js/html2canvas.min.js"> 
</script> 
<script type="text/javascript" language="javascript" src="js/jquery.plugin.html2canvas.js"> 
</script> 

È possibile scaricare gli ultimi due da: https://github.com/downloads/niklasvh/html2canvas/v0.34.zip

In Javascript , è quindi possibile codificare (sostituire #myObjectId con un selettore JQuery valido):

$('#myObjectID').html2canvas({ 
    onrendered : function(canvas) { 
    var img = canvas.toDataURL(); 
    // img now contains an IMG URL, you can do various things with it, but most simply: 
     $('<img>',{src:img}).appendTo($('body')); 
      } 
     });