Récemment, afin de résoudre l'enregistrement global d'informations anormales, le projet a étudié la fonction de capture d'écran complète du navigateur, afin que les utilisateurs puissent rapidement des captures d'écran et les envoyer à l'administrateur lorsqu'ils trouvent des anomalies. Les informations ultimes enregistrées dans le dossier final sont les suivantes.
Introduction à Html2CanvasDans le passé, nous n'avons pu intercepter les images que par d'autres outils de capture d'écran. La fonction des navigateurs modernes est devenue de plus en plus forte. HTML2CANVAS est une fiche avant -nt -in, et son principe est de dessiner le nœud Dom dans Canvas. Bien que cela soit pratique, il y a la limite suivante:
Parce que mon scénario d'utilisation est simple, il est également défini par moi-même, et la page anormale est également définie par moi-même, alors Html2Canvas suffit.
Utiliser l'instanceCitation jQuery, HTML2Canvas peut être utilisé et le code est simple. J'utilise la version html2Canvas 0.5.0 ici
Html2Canvas (#tbl_exception), {onRendered: function (canvas) {var url = canvas.todataurl (); pngto (corps); Triggerdownload [0] .click ();Le premier paramètre est l'objet DOM de la capture d'écran, et le deuxième paramètre est rendu après le canevas de récupération.
| Nom | Taper | Défaut | Description |
|---|---|---|---|
| Permettre | Booléen | FAUX | Si vous devez permettre aux images d'origine transversale de piéger la toile |
| arrière-plan | chaîne | #fff | Couleur d'arrière-plan de la toile, si aucun n'est spiecifié dans DOM. |
| hauteur | nombre | nul | Définissez le heigt de la toile en pixels. |
| création de lettres | Booléen | FAUX | S'il faut rendre chaque lettre séparément. |
| enregistrement | Booléen | FAUX | S'il faut enregistrer les événements dans la console. |
| procuration | chaîne | indéfini | L'URL vers le projet doit être utilisée pour charger des images d'origine croisée. |
| toit-déménagement | Booléen | vrai | S'il faut tester chaque image si elle entache la toile avant de les dessiner |
| Temps mort | nombre | 0 | Le délai d'attente pour le chargement des images, en millisecondes. |
| largeur | nombre | nul | Définissez la largeur de la toile en pixels. |
| usecors | Booléen | FAUX | Que ce soit pour tenter de charger des images d'origine transversale en tant que CORS servad, avant de revenir à Proxyy |
Après l'avoir introduit, lorsque vous parlez des problèmes que vous avez rencontrés dans votre utilisation, la capture d'écran ne peut intercepter le contenu de l'écran actuel. Recherchez une solution après la vérification du code source de la fiche et le débogage. Mettez le code source et le code modifié ci-dessous
Code source:
Return renderDocument (node.ownerDocuMe, Options, node.ownerDocument.defaultView.innerWidth, Node.OwnerDocuMew.innerHeight, Inde x). ) (OptionS.Nendered est déprécié, Html2Canvas Retour, est promesse contenant le canevas);
Modifier le code:
// 2016-02-18 Modifiez le code source pour résoudre le paramètre qui ne peut pas être utilisé pour ajouter une largeur personnalisée à l'écran complet pour prendre en charge Var Width = Options.Width! ! ) {log (options.onrentered est obsolète, html2Canvas renvoie une promesse contenant le canevas);Il s'agit principalement de permettre aux utilisateurs de personnaliser la largeur et la hauteur de l'objet DOM lors de l'appel.
$ (#Btn_screen) .on (click, function () {html2Canvas ($ (#tbl_exception), {height: $ (#tbl_exception) .outerHeight () + 20, onRendered: Fuins. (Canvas) {var url = canvas. Todataurl (); [0] .click (); Triggerdownload.Remove ();}});}); RésumerGrâce à la fiche avant, la fonction d'écran complète du navigateur est implémentée. L'apprentissage de chacun.