Prendre une capture d'écran d'une page Web avec JavaScript?

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. que la mise en œuvre serait pour l' ETS . Mais est-ce possible?

J'ai fait cela pour un HTA en utilisant un contrôle ActiveX. C'était assez facile 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'à obtenir la fenêtre dans le presse-papiers.

Une autre option, si la fenêtre dont vous voulez une capture d'écran est une HTA serait d'utiliser simplement une XMLHTTPRequest pour envoyer les nœuds DOM au serveur, puis de créer les captures d'écran côté serveur.

Google le fait dans Google+ et un développeur talentueux a procédé à une ingénierie inverse 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/ 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 valides (travail différent), j'intégrerai probablement PhantomJS dans de futurs projets.

Pounder si cela est possible en définissant les éléments du corps entier dans une toile puis en utilisant canvas2image?

http://www.nihilogic.dk/labs/canvas2image/

Une façon possible de faire cela, si vous exécutez sur 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 un objet ActiveX open source 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. Inconvénients: il doit enregistrer le fichier DLL chez le client et ne fonctionne qu'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 addons de navigateur (comme Fireshot pour Firefox et IE Screenshot pour Internet Explorer).

Le SnapEngage utilise une applet Java (1.5+) pour faire une capture d' écran du navigateur. AFAIK, java.awt.Robotdevrait faire le travail - l'utilisateur doit simplement permettre à l'applet de le faire (une fois).

Et je viens de trouver un article à ce sujet:

• Stack Overflow question 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é son nom, mais sous Windows Vista, il existe un outil pour faire des captures d'écran. Vous n'avez même pas besoin d'une installation supplémentaire pour cela.

Quant à l'automatique, 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 exemple, le système d'exploitation et la version).

J'ai trouvé que dom-to-image faisait du bon travail (bien mieux que html2canvas). Consultez la question et la réponse suivantes: https://stackoverflow.com/a/32776834/207981

Cette question demande de renvoyer cela au serveur, ce qui devrait être possible, mais si vous cherchez à télécharger les images, vous voudrez les combiner avec FileSaver.js , et si vous voulez télécharger un zip avec plusieurs fichiers image tous générés côté client, jetez un œil à jszip .

Une excellente solution pour la capture d'écran en Javascript est celle de https://grabz.it .

Ils ont 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 la clé d'application d' autorisation + le 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. Ensuite, attendez simplement un peu et l'image apparaîtra automatiquement en bas de 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 d'enregistrer 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 .

Si vous êtes prêt à le faire côté serveur, il existe des options comme PhantomJS , qui est désormais obsolète. La meilleure façon de procéder serait Chrome sans tête avec quelque chose comme Puppeteer sur Node.JS. Capturer une page Web à l'aide de Puppeteer serait aussi simple que suit:

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 fonctionner sur vos serveurs, ce qui a 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

• Restpack
• UrlBox
• Couche de capture d'écran

Cette question est ancienne, mais peut-être qu'il y a encore quelqu'un intéressé par une réponse à la pointe de la technologie:

Vous pouvez utiliser getDisplayMedia:

https://github.com/ondras/browsershot

À partir d'aujourd'hui avril 2020 Bibliothèque GitHub html2Canvas https://github.com/niklasvh/html2canvas

GitHub 20K étoiles | Pipeles Azure: Réussi | Téléchargements 1.3M / mois |

quote: " JavaScript HTML renderer Le script vous permet de prendre des" captures d'écran "de pages Web ou de parties de celles-ci, directement sur le navigateur de l'utilisateur . La capture d'écran est basée sur le DOM et peut donc ne pas être exacte à 100% par rapport à la représentation réelle car elle ne fait pas de capture d'écran réelle, mais construit la capture d'écran en fonction des informations disponibles sur la page.

J'ai créé une fonction simple qui utilise rasterizeHTML pour créer un svg et / ou une image avec le contenu de la page.

Vérifiez-le :

https://github.com/orisha/tdg-screen-shooter-pure-js