Comment convertir du HTML en image en JavaScript

Si vous souhaitez réaliser une capture d'écran d'une partie ou de l'ensemble de vos sites web faisant appel à JavaScript, vous risquez de vous retrouver bloqué. Développer une image à partir d'un composant HTML peut apparaître comme une difficulté, car il n'y a pas de moyen direct de le faire en JavaScript.

Heureusement, ce n'est pas une tâche impossible et c'est, en fait, plutôt simple avec les outils appropriés. En utilisant la bibliothèque html-to-image, faire des images des nœuds DOM est aussi simple qu'un simple appel téléphonique de fonctionnalité.

Comment fonctionne le html-to-image ?

Le sitehtml- to-imageproduit une image dans le type d'une URL de données base64. Elle soutient plusieurs styles de résultats, consistant en PNG, JPG et SVG. Pour exécuter cette conversion, la collection utilise cette formule :

  1. Créer un clone de l'élément HTML cible, de ses enfants et de tout pseudo-élément apposé.
  2. Copier la conception de tous les aspects dupliqués et installer la conception en ligne.
  3. Embarquez les polices web appropriées, s'il y en a.
  4. Embarquer tout type d'images existantes.
  5. Convertissez le nœud cloné directement en XML, puis en SVG.
  6. Utilisez le SVG pour développer une URL de données.

Caveats ainsi que les limites

Même si le html-to-image est une excellente collection, ce n'est pas le meilleur. Il comporte quelques mises en garde, plus précisément :

  • La collection ne fonctionnera pas dans Internet Explorer ou Safari.
  • Si le HTML que vous tentez de convertir comprend un composant de toile impur, la bibliothèque échouera certainement. CommeMDNdécrit, le fait de constituer des données non approuvées par le CORS dans votre aspect canvas l'entachera.
  • Parce que les navigateurs internet positionnent des limites sur la taille maximale d'une URL d'information, il existe des limites sur la taille du HTML que la bibliothèque peut transformer.
Voir aussi :  Comment le scoping fonctionne en JavaScript

Utilisation de la bibliothèque

Pour essayer la collection, la toute première chose que vous devez faire est de créer un répertoire de travail sur votre équipement de voisinage. Ensuite, montez html-to-image dans ce site de répertoire en utilisant le gestionnaire de bundle npm. Voici la commande du terminal pour le monter :

Vous devez également monter un bundler JavaScript, pour rendre l'utilisation de la collection un peu moins compliquée. Le siteesbuildbundler peut aider à emballer les modules de nœuds directement dans des scripts compatibles avec le Web.

C'est tout ce dont vous avez besoin pour monter. Next off, produire une donnée appelée index. html dans votre site répertoire, ainsi que l'offrir avec un serveur web de votre option. Mettez le code suivant dans index.html :

Ce code développe deux composants sur la page : une div avec une histoire de dégradé, et aussi un message et aussi une liste non ordonnée à l'intérieur d'une autre div. Ensuite, vous allez composer le JavaScript pour convertir ces aspects en images. Placez le code suivant dans une toute nouvelle donnée appelée script.js :

Ce code fait quelques points :

  • Importe la collection html-to-image.
  • Crée une sélection faite à partir de sélecteurs CSS ciblant les deux aspects.
  • Crée une photo PNG sous la forme d'une URL d'information à partir de chaque aspect de la sélection.
  • Crée une balise img et fixe également son crédit src à l'URL d'information, créant ainsi des doublons de photo des deux éléments.
Voir aussi :  Comment partager des extraits de code avec GitHub Gist

Utilisez maintenant esbuild pour générer le fichier emballé ( out. js ) que les recommandations index.html en exécutant l'adhérence à dans votre terminal :

À ce facteur, voici ce à quoi index.html devrait ressembler dans votre navigateur web :

Même si les copies ressemblent exactement aux originaux, il s'agit en fait de composants d'image. Vous pouvez le confirmer en ouvrant vos dispositifs de développement et également en les évaluant.

Cette bibliothèque fonctionne également avec les structures JavaScript. Le sitedocuments html- to-imageconsiste en des lignes directrices sur la façon exacte de générer d'autres styles d'images. De même, il comprend une instance montrant comment utiliser la bibliothèque avec React.

Prendre des captures d'écran avec JavaScript est facile

Il n'y a pas de méthode native JavaScript pour produire des photos à partir de composants HTML, ou pour prendre des captures d'écran du DOM. Néanmoins, à l'aide de bibliothèques ainsi que de services comme html-to-image, cela devient une tâche très facile.

Il existe diverses autres méthodes pour atteindre des résultats comparables, comme la collection wkhtmltoimage. Vous pouvez utiliser cet outil open-source pour prendre des captures d'écran d'un site web complet.

Puis-je convertir HTML en image ?

Conversion de HTML en JPG avec l'outil de capture d'écran de Windows Ouvrez votre fichier HTML dans votre navigateur ou tout autre outil visible. Prenez un instantané d'une zone avec votre outil de capture d'écran (outil Snipping sous Windows, par exemple). Cliquez sur Fichier > Enregistrer sous. Sélectionnez l'emplacement et sélectionnez le type Enregistrer en tant que JPG.

Voir aussi :  Qu'est-ce que Scrum Poker ?

Comment convertir HTML en JPG dans jquery ?

JS

  • $(document). prêt(fonction(){
  • élément var = $("#html-content-holder"); // variable globale.
  • var getCanvas; // variable globale.
  • $("#btn-Preview-Image"). on('clic', fonction() {
  • html2canvas(élément, {

Comment convertir HTML en PNG ?

Comment convertir HTML en PNG

  • Télécharger un ou plusieurs fichiers html Sélectionnez des fichiers à partir de l'ordinateur, de Google Drive, de Dropbox, d'une URL ou en les faisant glisser sur la page.
  • Choisissez "vers png" Choisissez png ou tout autre format dont vous avez besoin en conséquence (plus de 200 formats pris en charge)
  • Téléchargez votre png.

Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.