Si vous souhaitez prendre une capture d'écran d'une partie ou de la totalité de votre page Web à l'aide de JavaScript, vous risquez de vous retrouver bloqué. Créer une image à partir d'un élément HTML peut sembler un défi, car il n'existe aucun moyen direct de le faire en JavaScript.
Heureusement, ce n'est pas une tâche impossible et est, en fait, assez facile avec les outils appropriés. En utilisant la bibliothèque html-to-image, créer des images de nœuds DOM est aussi simple qu'un simple appel de fonction.
Comment fonctionne le html vers image ?
La html vers image library produit une image sous la forme d'une URL de données base64. Il prend en charge plusieurs formats de sortie, notamment PNG, JPG et SVG. Pour effectuer cette conversion, la bibliothèque utilise cet algorithme :
- Créez un clone de l'élément HTML cible, de ses enfants et de tout pseudo-élément attaché.
- Copiez le style de tous les éléments clonés et intégrez le style en ligne.
- Intégrez les polices Web pertinentes, le cas échéant.
- Intégrez toutes les images présentes.
- Convertissez le nœud cloné en XML, puis en SVG.
- Utilisez le SVG pour créer une URL de données.
Mises en garde et limites
Même si html-to-image est une excellente bibliothèque, elle n'est pas parfaite. Il comporte quelques mises en garde, à savoir :
- La bibliothèque ne fonctionnera pas dans Internet Explorer ou Safari.
- Si le code HTML que vous essayez de convertir inclut un élément de canevas teinté, la bibliothèque échouera. Comme MDN explique, inclure des données non approuvées par CORS dans votre élément canvas le corrompra.
- Étant donné que les navigateurs imposent des limites à la taille maximale d'une URL de données, il existe des limites à la taille du code HTML que la bibliothèque peut convertir.
Utilisation de la bibliothèque
Pour essayer la bibliothèque, la première chose à faire est de créer un répertoire de projet sur votre machine locale. Ensuite, installez html-to-image dans ce répertoire en utilisant le gestionnaire de paquets npm. Voici la commande terminal pour l'installer :
npm installer--save html-to-imageVous devez également installer un bundle JavaScript, pour faciliter un peu l'utilisation de la bibliothèque. La esbuild bundler peut aider à regrouper les modules de nœud dans des scripts compatibles avec le Web.
npm installer esbuildC'est tout ce que vous devez installer. Ensuite, créez un fichier appelé index.html dans votre répertoire et servez-le avec un serveur Web de votre choix. Mettez le code suivant dans index.html :
<!doctype html>
<html lang="fr">
<tête>
<meta charset="UTF-8">
<méta nom ="fenêtre"
contenu="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="Compatible X-UA" contenu="c'est-à-dire=bord">
<Titre>Document</title>
<style>
.colorful-div {
rembourrage: 3rem ;
Couleur blanche;
background-image: linear-gradient (à droite, jaune, rebeccappurple) ;
bordure: 1 pixel noir uni ;
marge: 1rem auto ;
taille de police: 3 rem ;
famille de polices: cursive ;
}
</style>
</head>
<corps>
<classe div="coloré-div">
je'Je vais être dans une capture d'écran !
</div>
<classe div="texte long">
je'm un exemple de paragraphe suffisamment verbeux qui
illustre que prendre des captures d'écran en JavaScript est
vraiment très facile, pour les raisons suivantes :
<ul>
<li>Raison 1</li>
<li>Raison 2</li>
<li>Raison 2</li>
</ul>
</div>
<script src="out.js"></script>
</body>
</html>
Ce code crée deux éléments sur la page: un div avec un arrière-plan dégradé, du texte et une liste non ordonnée à l'intérieur d'un autre div. Ensuite, vous allez écrire le JavaScript pour convertir ces éléments en images. Placez le code suivant dans un nouveau fichier appelé script.js :
importer * comme htmlVersImage de "html vers image" ;éléments const = ['.colorful-div', '.texte long']
éléments.pour chaque((elem, ind) => {
constante nœud = document.querySelector (élément)
htmlVersImage.toPng(nœud)
.alors(fonction (dataUrl) {
laisser image = Nouveau Image();
img.src = dataUrl;
document.corps.appendChild(image);
})
.attraper(fonction(Erreur){
console.error('oups, quelque chose s'est mal passé !');
console.log (erreur)
});
})
Ce code fait plusieurs choses :
- Importe la bibliothèque html vers image.
- Crée un tableau composé de sélecteurs CSS ciblant les deux éléments.
- Crée une image PNG sous la forme d'une URL de données à partir de chaque élément du tableau.
- Crée une balise img et définit son attribut src sur l'URL de données, créant des copies d'image des deux éléments.
Utilisez maintenant esbuild pour générer le fichier groupé (out.js) auquel index.html fait référence en exécutant ce qui suit dans votre terminal :
./node_modules/.bin/esbuild script.js --bundle --outfile=out.js
À ce stade, voici à quoi devrait ressembler index.html dans votre navigateur :
Même si les copies ressemblent exactement aux originaux, ce sont en fait des éléments d'image. Vous pouvez le confirmer en ouvrir vos outils de développement et de les inspecter.
Cette bibliothèque fonctionne également avec les frameworks JavaScript. La documentation html vers image contient des instructions sur la façon de générer d'autres formats d'image. Il comprend également un exemple 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 JavaScript native pour créer des images à partir d'éléments HTML ou pour prendre des captures d'écran du DOM. Cependant, avec l'aide de bibliothèques et de services comme html-to-image, cela devient une tâche facile.
Il existe d'autres moyens d'obtenir des résultats similaires, comme la bibliothèque wkhtmltoimage. Vous pouvez utiliser cet outil open source pour prendre des captures d'écran d'une page Web complète.
