L'utilisation de html2canvas pour implémenter les captures d'écran du navigateur doit être implémentée dans un environnement serveur.
effethtml2canvas peut prendre des captures d'écran côté navigateur via JS pur, mais la précision des captures d'écran doit être améliorée et certains CSS ne peuvent pas être reconnus, de sorte que le style d'écran d'origine ne peut pas être parfaitement présenté dans Canvas.
/*Il n'est pas possible d'omettre le débordement multiligne, il peut uniquement être masqué*/ .book_inf{ position: relative; overflow: caché; text-overflow: ellipsis; display: -webkit-line-clamp; : 2; - webkit-box-orient : vertical ; Navigateurs pris en charge /*Paramètres : * #screenshots L'identifiant de l'élément de la capture d'écran requis, la fonction à exécuter après la capture d'écran, * la couleur d'arrière-plan de l'élément de configuration backgroundColor * canvas est le dernier canevas renvoyé après la capture d'écran */function screenshotsImg(){ html2canvas (document.querySelector( #screenshots),{ backgroundColor: 'transparent',//Définir l'arrière-plan pour qu'il soit transparent}).then(canvas => { canvasTurnImg(canvas) //Méthode de conversion du format d'image enregistré}); } Éléments de configuration disponibles| Nom du paramètre | taper | valeur par défaut | décrire |
|---|---|---|---|
| autoriserTaint | booléen | FAUX | S'il faut autoriser les images d'origines croisées à entacher le canevas --- autoriser les images d'origines croisées |
| arrière-plan | chaîne | #fff | Couleur d'arrière-plan du canevas, si aucun n'est spécifié dans le DOM. Définissez non défini pour transparent --- la couleur d'arrière-plan du canevas, si le blanc par défaut n'est pas défini, c'est un piège, je l'ai changé en backgroundColor. |
| hauteur | nombre | nul | Définissez la hauteur du canevas en pixels. Si nul, le rendu est avec toute la hauteur de la fenêtre.---paramètre de hauteur du canevas. |
| lettreRendu | booléen | FAUX | S'il faut afficher chaque lettre séparément. Nécessaire si l'espacement des lettres est utilisé.---Utile lorsque l'espacement des lettres est défini. |
| enregistrement | booléen | FAUX | S'il faut enregistrer les événements dans la console.---Informations de sortie dans console.log() |
| procuration | chaîne | indéfini | URL du proxy qui doit être utilisé pour charger les images d'origine croisée. Si elle est laissée vide, les images d'origine croisée ne seront pas chargées.---Adresse du proxy. |
| tainTest | booléen | vrai | S'il faut tester chaque image si elle entache le canevas avant de les dessiner --- s'il faut tester l'image avant le rendu |
| temps mort | nombre | 0 | Délai d'expiration pour le chargement des images, en millisecondes. Le régler sur 0 n'entraînera aucun délai d'attente.---Délai de chargement des images, le délai par défaut est 0, en millisecondes. |
| largeur | nombre | nul | Définissez la largeur du canevas en pixels. Si nulle, le rendu s'effectue avec toute la largeur de la fenêtre.---largeur du canevas. |
| utiliserCORS | booléen | FAUX | S'il faut tenter de charger des images d'origines croisées pendant que CORS est servi, avant de revenir au proxy - proxy d'origines croisées |
1. Extrayez les métadonnées de l'image directement à partir du canevas
// Exporte l'image au format png var type = 'png'; var imgData = canvas.toDataURL(type);
2. Remplacez le type MIME par image/octet-stream pour forcer le navigateur à télécharger directement.
/** * Get mimeType * @param {String} tapez l'ancien type MIME * @return le nouveau type MIME */var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i , 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r;}; data, remplacez mime typeimgData = imgData.replace(_fixType(type),'image/octet-stream');3. Téléchargez l'image en local
/** * Enregistrer les fichiers localement * @param {String} data Données d'image à enregistrer localement * @param {String} nom de fichier nom de fichier */var saveFile = function(data, filename){ var save_link = document.createElementNS ('http ://www.w3.org/1999/xhtml', 'a'); save_link.href = data; save_link.download = nom de fichier; document.createEvent('MouseEvents'); event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null save_link.dispatchEvent(); event);}; // Nom du fichier téléchargé var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;// downloadsaveFile (imgData, nom de fichier);Cas
Cas
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.