Comment utiliser html2canvas pour convertir du code HTML en images

html2canvas est une bibliothèque open source très célèbre pour prendre des captures d'écran à partir des pages Web du navigateur. Elle est facile à utiliser et possède des fonctions puissantes.

L'utilisation de html2canvas est très simple, il suffit de transmettre un élément DOM puis d'obtenir le canevas via un rappel :

1.html2canvas génère le contenu de l'image du canevas en analysant le style réel de l'élément, il a donc des exigences pour la mise en page réelle et l'affichage visuel de l'élément. Si vous souhaitez prendre une capture d'écran complète, il est préférable de séparer l'élément du flux de documents (comme position:absolute)

2. L'image du canevas générée par défaut est très floue sur les appareils Retina. La traiter en une image 2x peut résoudre ce problème :

 var w = $(#code).width(); var h = $(#code).height();//Définissez la largeur et la hauteur du canevas à 2 fois la largeur et la hauteur du conteneur var canvas = document .createElement(canvas ); toile.largeur = w * 2; toile.hauteur = h * 2; toile.style.largeur = w + px; toile.style.hauteur = h + var contexte = canvas.getContext(2d);//Puis redimensionnez le canevas et doublez l'image pour dessiner sur le canevas context.scale(2,2); html2canvas(document.querySelector(#code), { canvas: canvas, onrendered: function ( toile) { ... } });

Structure du code 1.html

 <section class=share_popup id=html2canvas> <p>L'utilisation de html2canvas est très simple, aussi simple que de transmettre un élément DOM puis d'obtenir le canevas via un rappel</p> <p><img src=1.jpg >< /p> <p>L'utilisation de html2canvas est très simple, aussi simple que de transmettre un élément DOM puis d'obtenir le canevas via un rappel</p> </section>

Structure du code 2.js

 var str = $('#html2canvas'); //console.log(str); html2canvas([str.get(0)], { onrendu : fonction (canvas) { var image = canvas.toDataURL(image/png) ; var pHtml = <img src=+image+ />; $('#html2canvas').html(pHtml } });

Ce qui précède est l'introduction de l'éditeur sur la façon d'utiliser html2canvas pour convertir du code html en images. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !