Comment puis-je convertir un élément HTML d'un élément canvas?

Il serait très utile d'être en mesure de convertir provisoirement un élément permanent dans un canvas. Par exemple, dire que j'ai un style div que j'ai envie de le feuilleter. Je veux créer dynamiquement une toile, de "rendre" la HTMLElement dans la toile, de masquer l'élément d'origine et d'animer la toile.

Peut-il être fait?

Je sais suis en retard, mais il peut être utile pour le futur lecteur. Voici Étape par Étape Tutoriel sur la Conversion de HTML à l'IMAGE codepedia.info/2016/02/...

InformationsquelleAutor davemyron | 2010-04-28

canvas html5

17

Désolé, le navigateur ne va pas rendre le code HTML dans une toile.

Il serait un risque de sécurité potentiel si vous pouviez, au format HTML peut inclure du contenu (en particulier les images et les iframes) à partir de sites tiers. Si canvas pourrait tourner HTML contenu dans une image, puis de vous lire les données d'image, vous pourriez potentiellement extrait privilégié du contenu provenant d'autres sites.

Pour obtenir une toile de HTML, vous avez essentiellement écrire votre propre code HTML convertisseur de partir de zéro en utilisant drawImage et fillText, qui est potentiellement un énorme travail. Il y a une tentative de ce genre ici mais c'est un peu douteux et un long chemin d'être complète. (Elle même tente d'analyser le code HTML/CSS à partir de zéro, ce qui je pense est fou! Ce serait plus simple pour démarrer à partir d'un véritable nœud DOM avec des styles appliqués, et de lire le style à l'aide de getComputedStyle et les positions relatives des pièces à l'aide offsetTop et coll.)
- Eh bien, c'est une déception. Ce serait génial d'être en mesure de "geler" un élément et de le déformer, de quelque façon, et ensuite être capable de "dégeler" plus tard. Je suis en désaccord et que ce serait une nouvelles risque de sécurité. Ce ne serait pas différent que d'être en mesure d'utiliser JS pour lire les DOM et de voler cette info (et, bien sûr, tout le sandbox de contraintes sur JS s'appliquerait de la même façon). Merci pour la confirmation de ce que je soupçonnais serait la réponse, bobince.
- Ouais, c'est juste que l'application des Mêmes restrictions Origine serait nettement plus difficile pour général du contenu HTML que pour la croix-document de script. Vous devez garder une trace de chaque rectangle sur l'écran qui contenait de tout contenu de tiers, et de refuser de rendre la demande qui a croisé l'un d'eux — images, iframe, vidéo/audio, les éléments avec des images d'arrière-plan, tous les objets/intègre/applets savoir si une tierce partie ou pas (car ils ont leur propre croix-règles du site), SVG et ainsi de suite.
- Je suis en désaccord sur la question de la sécurité. Si vous avez accès à leur page, vous avez accès à de nombreuses informations peuvent être recueillies à partir d'un .png de leur page. Si la page est disponible, une capture d'écran de la page ouvre pas de nouveaux trous de sécurité!
- Vous pouvez inclure une personne de la page dans une frame ou d'autres moyens de l'intégrer sans avoir aucun script accès. Je peux <iframe src="https://example-online-bank.com/mystatement"> pour inclure une page cible dans mon document, mais je n'ai pas accès au contenu de la page à l'aide de DOM et je ne devrais pas être en mesure d'accéder à cette information par screenshotting il.
- Je suis sûr que ces problèmes peuvent être résolus avec un peu de réflexion. Par exemple, si une page HTML ou DOM peut être capturé pourrait dépendre si il y a XSS contenu de la page, qui est facile à voir pour le navigateur.
- Est-il facile? Le navigateur aurait pour démarrer l'enregistrement où chaque ressource incorporée vient—et pas seulement ceux avec DOM présence comme les iframes, mais aussi des images, des images de fond, des vidéos et des plugins qui ont leur propre incompatible modèles de sécurité. (Vous ne pouvez pas il suffit de regarder la src Url redirige pourrait être en jeu.)
- "Pour obtenir une toile de HTML, vous avez essentiellement écrire votre propre code HTML convertisseur de partir de zéro en utilisant drawImage et fillText, qui est potentiellement un énorme travail." Mais il a été fait neverheless, voir les autres réponses fournies par les Aristos. Il faut l'accepté de répondre à l'omi.
- Alors qu'un vrai (sauf si vous dessinez un ensemble restreint de HTML via SVG, voir ma réponse), cette réponse est un énorme hareng rouge: l'absence d'un mécanisme intégré pour ce faire, a très peu à voir avec la "sécurité". Le <canvas> élément a parfaitement applicable suivi pour savoir s'il est "à l'origine-propre" ou non. Si un élément canvas n'est pas d'origine propre, alors vous ne pouvez pas lire son contenu via JavaScript.
- mise à Jour: j'ai repris ma downvote et ont besoin de prendre un peu de mon commentaire précédent à la lumière d'une meilleure lecture de @bobince du commentaire ci-dessus...alors c'est vrai l'élément canvas pouvez suivre son origine état de propreté, il est déterminant de savoir si le DOM dessinée est à l'origine propre, qui peut être un peu plus difficile pour les navigateurs à mettre en œuvre. (Cependant, la plupart de tous le besoin "d'origine" de l'information serait disponible...le navigateur juste besoin de "marcher" la source DOM afin de déterminer s'il doit ou non d'entacher la toile.)
- "vous pourriez potentiellement extrait privilégié du contenu provenant d'autres sites", ce n'est pas vraiment la raison pour laquelle il n'est pas fait. en fait, c'est assez facile de lire du contenu à partir d'autres sites.
InformationsquelleAutor bobince
48

Il y a une bibliothèque qui essaient de faire ce que vous dites.

Voir ce exemples et obtenir le code

http://hertzen.com/experiments/jsfeedback/

http://html2canvas.hertzen.com/

Lit les DOM, à partir de l'html et de les rendre à une toile, ne parviennent pas à certains, mais en général les œuvres.
- c'est génial!! vraiment vraiment précis, compte tenu de tous les facteurs
InformationsquelleAutor Aristos
8

De construction sur le dessus de la Mozdev post que natevw références, j'ai commencé un petit projet pour rendre le code HTML sur la toile dans Firefox, google Chrome & Safari. Ainsi, par exemple, vous pouvez tout simplement faire:
```
rasterizeHTML.drawHTML('<span class="color: green">This is HTML</span>' 
                     + '<img src="local_img.png"/>', canvas);
```
Code Source et de plus en plus vastes exemple est ici.

InformationsquelleAutor cburgmer
7

Prendre un coup d'oeil à ce tutoriel sur MDN: https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

Autre Lien (2019) : https://reference.codeproject.com/book/dom/canvas_api/drawing_dom_objects_into_a_canvas

Il utilise un temporaire image SVG pour inclure le HTML contenu comme un "élément étranger", rend alors dit SVG image dans un canvas. Il y a d'importantes restrictions sur ce que vous pouvez inclure dans une image SVG, de cette façon, cependant. (Voir la section "Sécurité" pour plus de détails.)

InformationsquelleAutor natevw

Vous pouvez utiliser dom-to-image bibliothèque (je suis le responsable).

Voici comment vous pouvez approcher votre problème:

var parent = document.getElementById('my-node-parent');
var node = document.getElementById('my-node');

var canvas = document.createElement('canvas');
canvas.width = node.scrollWidth;
canvas.height = node.scrollHeight;

domtoimage.toPng(node).then(function (pngDataUrl) {
    var img = new Image();
    img.onload = function () {
        var context = canvas.getContext('2d');

        context.translate(canvas.width, 0);
        context.scale(-1, 1);
        context.drawImage(img, 0, 0);

        parent.removeChild(node);
        parent.appendChild(canvas);
    };

    img.src = pngDataUrl;
});

Et voici jsfiddle

Merci pour cette bibliothèque. !! Fait un petit changement dans votre jsfiddle par l'ajout d'un <h1>...</h1> dans le code HTML. Maintenant, la sortie est se couper. Veuillez trouver la nouvelle jsfiddle [lien]jsfiddle.net/2zLL7wvn Est-ce que je fais mal? S'il vous plaît aider. Merci,

InformationsquelleAutor tsayen

5

Pas une telle chose, désolé.

Si la spec états:

Une future version de la 2D contexte de l'API peut fournir un moyen de rendre des fragments de documents, rendus à l'aide de CSS, directement sur la toile.

Qui peut être aussi proche que vous obtiendrez.

Beaucoup de gens veulent un ctx.drawArbitraryHTML/Element genre de transaction, mais il n'y a rien construit comme ça.

La seule exception est Mozilla exclusif drawWindow, qui attire un instantané du contenu d'un DOM fenêtre sur la toile. Cette fonctionnalité est disponible uniquement pour le code en cours d'exécution avec Chrome ("local seulement") privilèges. Il n'est pas permis dans les pages HTML. De sorte que vous pouvez l'utiliser pour écrire des extensions FireFox comme ce ne mais c'est tout.

InformationsquelleAutor Simon Sarris
3

Vous pouviez vous-même les transformations, vous pouvez utiliser Transitions CSS3 de flip <div>'s et <ol>'s et toute balise HTML que vous voulez. Voici quelques démos avec le code source expliquer à voir et à apprendre: http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/
- Je suis sûr que vous voulez dire, mais beaucoup de gens, comme moi, de parvenir à ces questions par le biais de Google des requêtes, et d'avoir quelqu'un de me dire de faire quelque chose de différent à la place de la chose que je demande n'est pas utile. Le rendu de style HTML à un canevas signifie aussi que je peux télécharger que HTML WebGL texture, et ne stylisée des présentations de contenu mis en forme, avec des transformations et des shaders.
- Salut @paniq, je voulais juste vous présenter une technique alternative qui fonctionne réellement et est facile à saisir. Désolé cela ne vous dérange pas.
- Juste assez. Un Débordement de pile dit que je peux reprendre ma downvote si la réponse originale à cette question est en cours d'édition. Donc, si vous allez le faire, je vais le reprendre. Désolé, c'était un peu grognon.
- Merci pour l'aperçu, je pense que les gens qui veulent tourner HTML pour toile souhaitez effets qui peuvent exister déjà dans les exemples que vous avez posté. Donc, je suis content que vous avez posté dans ce thread.
InformationsquelleAutor Jürgen Messing
0

La solution la plus simple pour animer les éléments du DOM est à l'aide de CSS transitions/animations, mais je pense que vous connaissez déjà et que vous essayez d'utiliser la toile pour faire des trucs CSS ne pas vous laisser faire. Qu'en est CSS personnalisé filtres? vous pouvez transformer vos éléments en tout imaginables façon, si vous savez comment écrire des shaders. Certains autres lien et n'oubliez pas de vérifier la CSS filtre de laboratoire.

Note: Comme vous pouvez l'imaginer, prise en charge du navigateur est mauvais.

InformationsquelleAutor olanod

le code suivant peut être utilisé dans les 2 modes, le mode 1 enregistrez le code html d'une image, mode 2 enregistrez le code html d'une toile.

ce code de travail avec la bibliothèque: https://github.com/tsayen/dom-to-image

*le "id_div" est l'id de l'élément html que vous souhaitez transformer.

**le "canvas_out" est l'id de la div qui contient la toile
donc, essayez ce code.
:

   function Guardardiv(id_div){

      var mode = 2 //default 1 (save to image), mode 2 = save to canvas
      console.log("Process start");
      var node = document.getElementById(id_div);
      //get the div that will contain the canvas
      var canvas_out = document.getElementById('canvas_out');
      var canvas = document.createElement('canvas');
      canvas.width = node.scrollWidth;
      canvas.height = node.scrollHeight;

      domtoimage.toPng(node).then(function (pngDataUrl) {
          var img = new Image();
          img.onload = function () {
          var context = canvas.getContext('2d');
          context.drawImage(img, 0, 0);
        };

        if (mode == 1){ //save to image
             downloadURI(pngDataUrl, "salida.png");
        }else if (mode == 2){ //save to canvas
          img.src = pngDataUrl;
          canvas_out.appendChild(img);

        }
      console.log("Process finish");
    });

    }

donc, si vous souhaitez enregistrer l'image il suffit d'ajouter cette fonction:

    function downloadURI(uri, name) {
        var link = document.createElement("a");

        link.download = name;
        link.href = uri;
        document.body.appendChild(link);
        link.click();   
    }

Exemple d'utilisation:

 <html>
 <head>
 </script src="/dom-to-image.js"></script>
 </head> 
 <body>
 <div id="container">
   All content that want to transform
  </div>
  <button onclick="Guardardiv('container');">Convert<button> 

 <!-- if use mode 2 -->
 <div id="canvas_out"></div>
 </html>

Commentaire si ce travail.
Comenten si les sirvio 🙂

InformationsquelleAutor Luis Villadiego

-1

function convert() {
                    dom = document.getElementById('divname');
                    var script,
                    $this = this,
                    options = this.options,
                    runH2c = function(){
                        try {
                            var canvas =     window.html2canvas([ document.getElementById('divname') ], {
                                onrendered: function( canvas ) {

                                window.open(canvas.toDataURL());

                                }
                            });
                        } catch( e ) {
                            $this.h2cDone = true;
                            log("Error in html2canvas: " + e.message);
                        }
                    };

                    if ( window.html2canvas === undefined && script === undefined ) {
                    } else {.
                        //html2canvas already loaded, just run it then
                        runH2c();
                    }
                }

InformationsquelleAutor Seo Gregory

Vous devez vous connecter pour publier un commentaire.