JavaScript implémente les compétences de fonction_javascript de capture d'écran de page Web

En utilisant JavaScript pour prendre des captures d'écran, je voudrais ici recommander deux composants open source : l'un est Canvas2Image, qui peut programmer le dessin Canvas en images PNG/JPEG/BMP, mais ce n'est pas suffisant à lui seul, nous devons donner Pour prendre une capture d'écran de n'importe quel DOM (au moins la plupart), vous avez besoin de html2canvas, qui peut convertir l'objet DOM en un objet canevas. En combinant les fonctions des deux, vous pouvez capturer le DOM de la page dans une image PNG ou JPEG, ce qui est très cool.

Canvas2Image

Le principe est d'utiliser l'objet HTML5 canvas pour fournir l'API toDataURL() :

Copier le code Le code est le suivant :

var strDataURI = oCanvas.toDataURL();
// renvoie "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

Un tel résultat est codé en base64 (en fait, l'image peut également être écrite sur la page sous la forme d'une chaîne de cette manière), nous avons donc également besoin d'une bibliothèque d'encodage et de décodage en base64.

Cependant, il existe actuellement de nombreux défauts. Par exemple, Opera et Safari ne prennent actuellement en charge que le format PNG, tandis que FireFox offre un bien meilleur support.

Il existe deux façons de générer des images et de les écrire dans la page. La première consiste à générer un objet image et à l'écrire dans l'arborescence DOM de la page. C'est également une manière plus conviviale :

Copier le code Le code est le suivant :

// renvoie un élément contenant l'image PNG convertie
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);

Mais si vous créez une fonction de capture d'écran JavaScript, vous souhaiterez peut-être ouvrir automatiquement la boîte de dialogue « Enregistrer » pour enregistrer le fichier après avoir pris la capture d'écran :

Copier le code Le code est le suivant :

Canvas2Image.saveAsPNG(oCanvas);
// invitera l'utilisateur à enregistrer l'image au format PNG.

L'appel de cette méthode générera un flux de données avec le type mime "image/octet-stream" vers le navigateur, mais la boîte de dialogue "Enregistrer" ne peut pas reconnaître le nom de suffixe approprié de l'image. Le fichier par défaut enregistré sous FireFox est "xxx.part". C'est dommage, mais il ne semble pas y avoir de solution.

html2canvas

Il agit sur le processus de chargement du DOM, collecte les informations, puis dessine l'image du canevas. En d'autres termes, il ne coupe pas réellement l'arborescence DOM affichée en image du canevas, mais redessine un canevas basé sur l'arborescence DOM. image. Par conséquent, de nombreux styles CSS ne peuvent pas être reconnus avec précision et ne peuvent pas être reflétés avec précision sur l'image.

Il existe de nombreuses autres restrictions, telles que :

● Javascript doit être dans le même domaine. Pour les situations inter-domaines, un serveur proxy doit être utilisé (il existe des paramètres dans l'API qui peuvent être spécifiés). ●L'arborescence DOM dans le cadre ne peut pas être dessinée avec précision
 ; ●Étant donné que le dessin est un canevas, les navigateurs comme IE8 doivent utiliser des bibliothèques tierces telles que
FlashCanvas.

Cette page peut tester l'effet de divers sites Web qui l'utilisent pour prendre des captures d'écran, et l'effet est plutôt bon :

Exemples d'utilisation de l'API :

Copier le code Le code est le suivant :

html2canvas(
[dom1, dom2],
{
        journalisation : faux,
useCORS : faux,
​​​​proxy :​​faux,
rendu : fonction (canvas) {
// Canvas est l'objet qui est dessiné
>
>
);

Pour cette bibliothèque de classes relativement niche, la documentation est très pauvre, y compris la définition de l'API. Vous devez lire le code source, et le code est clairement écrit.

De plus, il existe un plug-in JQuery dans le package de téléchargement de ce site, qui encapsule cette API et peut être ignoré.