Comment capturer un site Web en JavaScript côté client / comment Google l'a-t-il fait? (pas besoin d'accéder au disque dur)
Je travaille sur une application Web qui nécessite le rendu d'une page et une capture d'écran côté client (navigateur).
Toutefois, je n'ai pas besoin de sauvegarder la capture d'écran sur le disque dur local. Il vous suffit de la conserver dans RAM et de l'envoyer ultérieurement au serveur d'applications.
J'ai recherché:
- BrowserShots comme services ...
- Navigateurs mécanisés ...
- wkhtmltoimage ...
- Python WebKit2PNG ...
Mais aucun de ceux-ci ne me donne tout ce dont j'ai besoin, à savoir:
- Traitement côté navigateur (générer une capture d'écran de la page). Pas besoin d'être enregistré sur le disque dur! Juste...
- ... envoyer une image au serveur pour un traitement ultérieur.
- Capture de la page entière (pas seulement la partie visible)
Finalement, je suis tombé sur l'outil de commentaires de Google (cliquez sur "Commentaires" sur le pied de page YouTube pour voir ceci). Il contient JavaScript pour l'encodage JPG et deux autres scripts énormes que je ne peux pas déterminer ce qu'ils font exactement ...
Mais il est traité côté client - sinon, il ne servirait à rien de mettre cet énorme encodeur JPEG dans le code!
Quelqu'un a une idée de comment ils l'ont fait/comment je peux le faire?
Voici un exemple de retour (signaler un bug sur certains écrans)
" tiliser HTML5/Canvas/JavaScript pour prendre des captures d'écran " répond à votre problème.
Vous pouvez utiliser JavaScript/Canvas pour faire le travail, mais il est toujours expérimental.
J'avais besoin de capturer une div sur la page (pour une application Web que j'ai écrite) qui est protégée par JWT et utilise très fréquemment Angular.
Je n'ai eu aucune chance avec l'une des méthodes ci-dessus.
J'ai fini par prendre la couche externe HTML dont j'avais besoin, en la nettoyant un peu (*), puis en l'envoyant au serveur sur lequel je lance wkhtmltopdf.
Cela fonctionne très bien pour moi.
(*) Les différents périphériques d’entrée de mes pages n’ont pas rendu la propriété telle que cochée ou ont leur valeur textuelle lorsqu’ils sont visualisés au format PDF ... Je lance donc un peu de jQuery sur le code HTML avant de l’envoyer au rendu. ex: pour les éléments de saisie de texte - je copie leurs attributs .val () dans les attributs 'value', qui peuvent ensuite être vus par wkhtmlpdf