htmltoimage
rc-0.1
Génère une image à partir d'un nœud DOM à l'aide d'un canevas HTML5 et de SVG.
Fork du dom à l'image avec un code plus maintenable et quelques nouvelles fonctionnalités.
npm install --save html-to-image
/* ES6 */import * as htmlToImage from 'html-to-image'; import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';/* ES5 */var htmlToImage = require(' html vers image');Toutes les fonctions de niveau supérieur acceptent les options de nœud DOM et de rendu, et renvoient une promesse remplie avec l'URL de données correspondante :
versSvg
toPng
versJpeg
versBlob
versPixelData
Suivez les exemples suivants.
Obtenez une URL de données d'image PNG encodée en base64 et affichez-la immédiatement :
var node = document.getElementById('my-node');htmlToImage.toPng(node)
.then(function (dataUrl) {var img = new Image();img.src = dataUrl;document.body.appendChild(img);
})
.catch(function (error) {console.error('oups, quelque chose s'est mal passé !', erreur);
});Obtenez une URL de données d'image PNG encodée en base64 et téléchargez-la (en utilisant le téléchargement) :
htmlToImage.toPng(document.getElementById('mon-noeud'))
.then(function (dataUrl) {download(dataUrl, 'my-node.png');
});Obtenez une image blob PNG et téléchargez-la (à l'aide de FileSaver) :
htmlToImage.toBlob(document.getElementById('my-node'))
.then(function (blob) {window.saveAs(blob, 'my-node.png');
});Enregistrez et téléchargez une image JPEG compressée :
htmlToImage.toJpeg(document.getElementById('my-node'), { qualité : 0,95 })
.then(function (dataUrl) {var link = document.createElement('a');link.download = 'my-image-name.jpeg';link.href = dataUrl;link.click();
}); Obtenez une URL de données SVG, mais filtrez tous les éléments <i> :
filtre de fonction (nœud) {
return (node.tagName !== 'i');}htmlToImage.toSvg(document.getElementById('my-node'), { filter: filter })
.then(function (dataUrl) {/* faire quelque chose */
});Obtenez les données brutes des pixels sous forme de Uint8Array avec tous les 4 éléments du tableau représentant les données RGBA d'un pixel :
var node = document.getElementById('my-node');htmlToImage.toPixelData(node)
.then(function (pixels) {for (var y = 0; y < node.scrollHeight; ++y) { for (var x = 0; x < node.scrollWidth; ++x) {pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);/* pixelAtXY est un Uint8Array[4] contenant les valeurs RGBA du pixel en (x, y) dans la plage 0..255 */pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4 }});
});Obtenez un HTMLCanvasElement et affichez-le immédiatement :
htmlToImage.toCanvas(document.getElementById('mon-noeud'))
.then(function (canvas) {document.body.appendChild(canvas);
});Une fonction prenant le nœud DOM comme argument. Doit renvoyer vrai si le nœud passé doit être inclus dans la sortie. Exclure un nœud signifie également exclure ses enfants.
Non appelé sur le nœud racine.
Une valeur de chaîne pour la couleur d'arrière-plan, toute valeur de couleur CSS valide.
Largeur et hauteur en pixels à appliquer au nœud avant le rendu.
Un objet dont les propriétés doivent être copiées dans le style du nœud avant le rendu. Vous souhaiterez peut-être consulter cette référence pour les noms JavaScript des propriétés CSS.
Un nombre compris entre 0 et 1 indiquant la qualité de l'image (par exemple 0.92 => 92% ) de l'image JPEG.
La valeur par défaut est 1.0 ( 100% )
Définissez sur true pour ajouter l’heure actuelle sous forme de chaîne de requête aux requêtes URL afin d’activer le contournement du cache.
La valeur par défaut est false
Une URL de données pour une image d'espace réservé qui sera utilisée lors de l'échec de la récupération d'une image.
La valeur par défaut est une chaîne vide et affichera les zones vides pour les images ayant échoué.
Il a été testé sur les derniers Chrome et Firefox (49 et 45 respectivement au moment de la rédaction), Chrome fonctionnant nettement mieux sur les grandes arborescences DOM, peut-être en raison de sa prise en charge SVG plus performante et du fait qu'il prend en charge la propriété CSSStyleDeclaration.cssText .
Internet Explorer n'est pas (et ne sera pas) pris en charge, car il ne prend pas en charge la balise SVG <foreignObject> .
Safari n'est pas pris en charge, car il utilise un modèle de sécurité plus strict sur la balise <foreignObject> . La solution de contournement suggérée consiste à utiliser toSvg et à effectuer le rendu sur le serveur.
Seule la bibliothèque standard est actuellement utilisée, mais assurez-vous que votre navigateur prend en charge :
Promesse
Balise SVG <foreignObject>
Il existera peut-être un jour (ou peut-être existe-t-il déjà ?) un moyen simple et standard d'exporter des parties du code HTML vers une image (et ce script ne peut alors servir que de preuve de tous les obstacles que j'ai dû franchir pour obtenir un tel code). chose évidente) mais je n'en ai pas trouvé jusqu'à présent.
Cette bibliothèque utilise une fonctionnalité de SVG qui permet d'avoir du contenu HTML arbitraire à l'intérieur de la balise <foreignObject> . Ainsi, afin de restituer ce nœud DOM pour vous, les étapes suivantes sont suivies :
Cloner le nœud DOM d'origine de manière récursive
Calculez le style du nœud et de chaque sous-nœud et copiez-le dans le clone correspondant
et n'oubliez pas de recréer les pseudo-éléments, car ils ne sont en aucun cas clonés, bien sûr
Intégrer des polices Web
trouver toutes les déclarations @font-face pouvant représenter des polices Web
analyser les URL des fichiers, télécharger les fichiers correspondants
encodage en base64 et contenu en ligne sous forme d'URL de données
concaténer toutes les règles CSS traitées et les placer dans un seul élément <style> , puis l'attacher au clone
Incorporer des images
intégrer les URL des images dans les éléments <img>
images en ligne utilisées dans la propriété CSS background , d'une manière similaire aux polices
Sérialiser le nœud cloné en XML
Enveloppez le XML dans la balise <foreignObject> , puis dans le SVG, puis faites-en une URL de données
Facultativement, pour obtenir du contenu PNG ou des données de pixels brutes sous forme de Uint8Array, créez un élément Image avec le SVG comme source et restituez-le sur un canevas hors écran, que vous avez également créé, puis lisez le contenu du canevas.
Fait!
Si le nœud DOM que vous souhaitez restituer inclut un élément <canvas> sur lequel est dessiné quelque chose, cela doit être géré correctement, à moins que le canevas ne soit entaché - dans ce cas, le rendu échouera plutôt.
Le rendu échouera sur un énorme DOM en raison de la variation de la limite dataURI.
Les demandes de tirage et les étoiles sont les bienvenues.
Pour les bogues et les demandes de fonctionnalités, veuillez créer un problème.
