En utilisant des captures d'écran JavaScript, je voudrais recommander deux composants open source ici: l'un est Canvas2Image, qui peut programmer le dessin et programmation PNG / JPEG / BMP; Mais l'avoir seul ne suffit pas. Nous devons prendre des captures d'écran de tout DOM (au moins la grande majorité), qui nécessite HTML2Canvas, qui peut convertir l'objet Dom en un objet en toile. En combinant les fonctions des deux, vous pouvez prendre la capture d'écran DOM sur la page en images PNG ou JPEG, ce qui est très cool.
Canvas2Image
Son principe est d'utiliser l'objet de toile HTML5 pour fournir l'API Todataurl ():
La copie de code est la suivante:
var strdatauri = ocanvas.todataurl ();
// Renvoie "Données: Image / PNG; Base64, IVBORW0KGOAAAAANSUHEUGAAAMGAAADICAYAAACT ..."
Le résultat est codé en base64 (en fait, l'image peut également être écrite sur la page de cette manière sous la forme d'une chaîne), nous avons donc également besoin d'une LIB codée de base64.
Cependant, il existe actuellement de nombreux défauts. Par exemple, l'opéra et le safari ne soutiennent que la PNG, tandis que Firefox est beaucoup mieux favorable.
Il existe deux façons d'écrire des images sur la page. L'une consiste à générer un objet d'image à écrire sur la page Dom Tree, qui est également une meilleure méthode de soutien:
La copie de code est la suivante:
// Renvoie un élément <img> contenant l'image PNG convertie
var oimgpng = canvas2image.saveaspng (Ocanvas, true);
Mais si vous effectuez une fonction de capture d'écran JavaScript, vous pouvez ouvrir automatiquement la boîte de dialogue "Enregistrer" pour enregistrer le fichier après la capture d'écran:
La copie de code est la suivante:
Canvas2image.saveaspng (oCanvas);
// invitera l'utilisateur à enregistrer l'image sous le nom de PNG.
L'appel de cette méthode générera un flux de données avec MIMETYPE "Image / Octet-Stream" au navigateur, mais la boîte de dialogue "Enregistrer" ne peut pas reconnaître le nom de suffixe approprié de l'image. Le fichier enregistré par défaut est appelé "xxx.part" sous Firefox. C'est dommage, mais il ne semble pas y avoir de bonne solution.
html2canvas
Il agit sur le processus de chargement DOM, collecte les informations, puis dessine l'image en toile. En d'autres termes, il ne coupe pas réellement l'arbre Dom affiché en une image de toile, mais réduit plutôt une image de canevas basée sur l'arbre Dom. Par conséquent, de nombreux styles CSS ne peuvent pas être identifiés avec précision et ne peuvent pas être reflétés avec précision sur la figure.
Il existe de nombreuses autres restrictions, telles que:
● JavaScript doit être du même domaine. Pour les situations de domaine croisé, vous devez utiliser un serveur proxy (il existe des paramètres dans l'API qui peuvent être spécifiés), et il en va de même pour l'image;
● L'arbre Dom dans le cadre ne peut pas être dessiné avec précision;
● Parce que vous souhaitez dessiner un diagramme de canevas, les navigateurs comme IE8 doivent utiliser des bibliothèques tierces comme FlashCanvas.
Cette page peut tester l'effet de l'utilisation pour des captures d'écran dans chaque site Web, et l'effet est assez bon:
Exemples d'utilisation de l'API:
La copie de code est la suivante:
html2Canvas (
[Dom1, Dom2],
{
journalisation: faux,
Usecors: faux,
proxy: faux,
onRendered: fonction (canvas) {
// toile est l'objet en toile dessiné
}
}
));
Pour ce type de bibliothèque de classe de niche relativement niche, la documentation est très médiocre, y compris la définition de l'API, qui nécessite la lecture du code source et est clairement écrite dans le code.
De plus, il existe également un plug-in jQuery dans le package de téléchargement de ce site, qui a encapsulé cette API et peut être ignoré.