html2canvas Tutoriel?

Je voudrais utiliser html2canvas mais je n'ai aucune idée de comment.

N'en déplaise à Hertzen, il a fait un excellent script, mais la documentation est incomplète, donc c'est plutôt inutile.

J'ai regardé JSFeedback mais l'ensemble du script (que j'ai eu à "voler" de la source HTML) ne fonctionne qu'avec sa version de html2canvas qui, dans les commentaires, il dit n'est pas prêt pour ouvert sourceness.

Toute aide sera vraiment apprécié Apparatix.

Super application, je l'ai utilisé dans un projet. Je pense en regardant la démo de scripts est tout à fait suffisant.
Ouais, j'ai démonté le code que j'utilise en regardant Hertzen test de la console.

OriginalL'auteur apparatix | 2012-05-21

  1. 2

    html2canvas prend tout dans les DOM objet de préciser -- tous les enfants, et leurs enfants, etc. - et la réplique dans un Canvas (qui se trouve dans la toile de la variable transmise à la fonction) en fonction de leurs différentes caractéristiques, y compris à la frontière, le contenu, les styles, etc. toile.toDataURL() convertit le contenu de la Toile à un flux de caractères qui représentent une image qui peut être utilisé comme un crs dans une balise, c'est à dire 

    <img src=imgdataurl>

    ou la configuration d'un background-image via javascript/jquery, comme ceci --

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

    Si elle ne fonctionne pas pour vous, il se peut que vous spécifiez un mauvais parent de l'élément DOM -- vous pouvez essayer de $('body') au lieu de $('#myObj') et voir si quelque chose arrive.

    OriginalL'auteur sneuf

  2. 10

    Donner à ce tourbillon --

    Dans votre index.html, ajouter le code javascript suivant des fichiers:

    <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>

    Vous pouvez télécharger les deux derniers à partir de:
    https://github.com/downloads/niklasvh/html2canvas/v0.34.zip

    Dans votre Javascript, vous pouvez alors le code (remplacer #myObjectId avec une pièce d'sélecteur JQuery):

    $('#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'));
            }
        });
    Fait ce que vous avez dit, mais je ne vois rien. Qu'est-ce exactement ne canvas.toDataURL() faire? BTW, merci pour la réponse.
    Ai eu de travail, mais une question - comment puis-je capturer d'autres pages?
    Eh bien, c'est une autre histoire... Vous avez besoin d'ouvrir une autre page pour l'exécution de ce code. La page doit être rendu à l'écran afin d'utiliser html2canvas.
    Hertzen lui-même semble l'avoir fait dans la console d'essai ici: html2canvas.hertzen.com/screenshots.html
    Vrai, mais il semble tirer les pages via le code côté serveur tout d'abord: "Le seul serveur d'interaction qui se passe sur cette page est le proxy pour le chargement des pages externes/images en JSONP/SCRO activé la page et partir sur le moteur de rendu JavaScript script". Sans regarder le code, je suppose qu'il est le tirant par le serveur via le processus côté serveur, en le poussant vers le client, de l'afficher, et puis le rendu de la Toile de l'objet.

    OriginalL'auteur sneuf