Faire une capture d'écran d'une page Web avec JavaScript ?
https://stackoverflow.com/questions/60455
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Est-il possible de prendre une capture d'écran d'une page Web avec JavaScript, puis de la renvoyer au serveur ?
Je ne suis pas tellement préoccupé par les problèmes de sécurité du navigateur.etc.car la mise en œuvre serait pour ETS.Mais est-ce possible ?
La solution
J'ai fait cela pour un HTA en utilisant un contrôle ActiveX.Il était assez simple de créer le contrôle dans VB6 pour prendre la capture d'écran.J'ai dû utiliser l'appel API keybd_event car SendKeys ne peut pas faire PrintScreen.Voici le code pour cela :
Declare Sub keybd_event Lib "user32" _
(ByVal bVk As Byte, ByVal bScan As Byte, ByVal dwFlags As Long, ByVal dwExtraInfo As Long)
Public Const CaptWindow = 2
Public Sub ScreenGrab()
keybd_event &H12, 0, 0, 0
keybd_event &H2C, CaptWindow, 0, 0
keybd_event &H2C, CaptWindow, &H2, 0
keybd_event &H12, 0, &H2, 0
End Sub
Cela ne vous amène qu'à placer la fenêtre dans le presse-papiers.
Une autre option, si la fenêtre dont vous souhaitez une capture d'écran est un HTA, serait simplement d'utiliser un XMLHTTPRequest pour envoyer les nœuds DOM au serveur, puis de créer les captures d'écran côté serveur.
Autres conseils
Google fait cela dans Google+ et un développeur talentueux l'a réalisé en rétro-ingénierie et a produit http://html2canvas.hertzen.com/ .Pour travailler dans IE, vous aurez besoin d'une bibliothèque de support de canevas telle que http://excanvas.sourceforge.net/
Une autre solution possible que j'ai découverte est http://www.phantomjs.org/ ce qui permet de prendre très facilement des captures d'écran de pages et bien plus encore.Bien que mes exigences initiales pour cette question ne soient plus valables (travail différent), j'intégrerai probablement PhantomJS dans de futurs projets.
Pounder si cela est possible en définissant tous les éléments du corps dans un canevas puis en utilisant canvas2image ?
Une façon possible de le faire, si vous utilisez Windows et que .NET est installé, vous pouvez faire :
public Bitmap GenerateScreenshot(string url)
{
// This method gets a screenshot of the webpage
// rendered at its full size (height and width)
return GenerateScreenshot(url, -1, -1);
}
public Bitmap GenerateScreenshot(string url, int width, int height)
{
// Load the webpage into a WebBrowser control
WebBrowser wb = new WebBrowser();
wb.ScrollBarsEnabled = false;
wb.ScriptErrorsSuppressed = true;
wb.Navigate(url);
while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); }
// Set the size of the WebBrowser control
wb.Width = width;
wb.Height = height;
if (width == -1)
{
// Take Screenshot of the web pages full width
wb.Width = wb.Document.Body.ScrollRectangle.Width;
}
if (height == -1)
{
// Take Screenshot of the web pages full height
wb.Height = wb.Document.Body.ScrollRectangle.Height;
}
// Get a Bitmap representation of the webpage as it's rendered in the WebBrowser control
Bitmap bitmap = new Bitmap(wb.Width, wb.Height);
wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height));
wb.Dispose();
return bitmap;
}
Et puis via PHP vous pouvez faire :
exec("CreateScreenShot.exe -url http://.... -save C:/shots domain_page.png");
Ensuite, vous avez la capture d’écran côté serveur.
Ce n’est peut-être pas la solution idéale pour vous, mais cela vaut peut-être la peine d’être mentionné.
Snapsie est une source ouverte, ActiveX objet qui permet de capturer et d'enregistrer des captures d'écran d'Internet Explorer. Une fois le fichier DLL enregistré sur le client, vous devriez pouvoir capturer la capture d'écran et télécharger le fichier sur le serveur avec JavaScript.Désavantages:il doit enregistrer le fichier DLL sur le client et fonctionne uniquement avec Internet Explorer.
Nous avions une exigence similaire pour signaler les bogues.Puisqu'il s'agissait d'un scénario intranet, nous avons pu utiliser des modules complémentaires de navigateur (comme Coup de feu pour Firefox et Capture d'écran d'IE pour Internet Explorer).
Le SnapEngage utilise un Applet Java (1.5+) pour faire une capture d'écran du navigateur.AUTANT QUE JE SACHE, java.awt.Robot devrait faire le travail - l'utilisateur n'a qu'à autoriser l'applet à le faire (une fois).
Et je viens de trouver un post à ce sujet :
- Question de débordement de pile Code JavaScript pour prendre une capture d'écran d'un site Web sans utiliser ActiveX
- Article de blog Comment fonctionne SnapABug – et ce qu'ils doivent faire
Vous pouvez y parvenir en utilisant HTA et VBScript.Appelez simplement un outil externe pour faire la capture d’écran.J'ai oublié le nom, mais sous Windows Vista, il existe un outil permettant de faire des captures d'écran.Vous n'avez même pas besoin d'une installation supplémentaire pour cela.
Quant à l'automatisation, cela dépend totalement de l'outil que vous utilisez.S'il dispose d'une API, je suis sûr que vous pouvez déclencher le processus de capture d'écran et d'enregistrement via quelques appels Visual Basic sans que l'utilisateur sache que vous avez fait ce que vous avez fait.
Puisque vous avez mentionné HTA, je suppose que vous êtes sous Windows et que vous connaissez (probablement) votre environnement (par ex.OS et version) très bien.
Une excellente solution pour la prise de capture d'écran en Javascript est celle de https://grabz.it.
Ils disposent d'une API de capture d'écran flexible et simple à utiliser qui peut être utilisée par tout type d'application JS.
Si vous voulez l'essayer, vous devez d'abord obtenir l'autorisation clé d'application + secret et le SDK gratuit
Ensuite, dans votre application, les étapes de mise en œuvre seraient :
// include the grabzit.min.js library in the web page you want the capture to appear
<script src="grabzit.min.js"></script>
//use the key and the secret to login, capture the url
<script>
GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com").Create();
</script>
La capture d'écran peut être personnalisée avec différents paramètres.Par exemple:
GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com",
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>
C'est tout.Il vous suffit ensuite de patienter quelques instants et l'image apparaîtra automatiquement en bas de la page, sans que vous ayez besoin de recharger la page.
Il existe d'autres fonctionnalités du mécanisme de capture d'écran que vous pouvez explorer ici.
Il est également possible de sauvegarder la capture d'écran localement.Pour cela, vous devrez utiliser l'API côté serveur GrabzIt.Pour plus d'informations, consultez le guide détaillé ici.
Je l'ai trouvé dom-à-image a fait du bon travail (bien mieux que html2canvas).Voir la question et la réponse suivantes : https://stackoverflow.com/a/32776834/207981
Cette question concerne la soumission de cette information au serveur, ce qui devrait être possible, mais si vous souhaitez télécharger la ou les images, vous souhaiterez la combiner avec FileSaver.js, et si vous souhaitez télécharger un zip avec plusieurs fichiers image, tous générés côté client, jetez un œil à jszip.
Si vous souhaitez le faire côté serveur, il existe des options telles que PhantomJS, qui est désormais obsolète.La meilleure façon de procéder serait Headless Chrome avec quelque chose comme Marionnettiste sur Node.JS.Capturer une page Web à l'aide de Puppeteer serait aussi simple que ceci :
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'example.png'});
await browser.close();
})();
Cependant, il nécessite un chrome sans tête pour pouvoir s'exécuter sur vos serveurs, ce qui comporte certaines dépendances et peut ne pas convenir aux environnements restreints.(De plus, si vous n'utilisez pas Node.JS, vous devrez peut-être gérer vous-même l'installation/le lancement des navigateurs.)
Si vous souhaitez utiliser un service SaaS, il existe de nombreuses options telles que
