html2canvas Tutorial?

Question

Me gustaría usar html2canvas, pero no tengo idea de cómo.

Sin ofender a Hertzen, ha hecho un gran guión, pero la documentación está incompleta, por lo que es bastante inútil.

Miré JSFeedback pero todo el script (que tuve que "robar" de la fuente HTML) funciona solo con su versión de html2canvas que, en los comentarios, dice que no está preparada para código abierto.

Cualquier ayuda será realmente apreciada - Apparatix.

Answer 1

html2canvas básicamente toma todo en el objeto DOM que especifique - todos los niños, y sus hijos, etc. - y los replica en un objeto Canvas (encontrado en la variable canvas pasada a la función) en función de sus diversas características, incluidos los bordes, contenidos, estilos, etc. canvas.toDataURL() convierte el contenido de la lona a una corriente de caracteres que representan una imagen que puede ser utilizado como un src en una etiqueta, es decir,

<img src=imgdataurl> 

o ajuste una imagen de fondo a través de javascript/jquery, como esta -

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

If no funciona para usted, es posible que esté especificando un elemento DOM principal incorrecto; puede probar $ ('body') en lugar de $ ('# myObj') y ver si aparece algo.

Answer 2

Dar a este un torbellino -

En su index.html, añadir los siguientes archivos 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> 

se puede descargar los dos últimos de: https://github.com/downloads/niklasvh/html2canvas/v0.34.zip

En su Javascript , puede codificar (reemplazar #myObjectId con un selector JQuery válido):

$('#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')); 
      } 
     });