Faire une capture d'écran d'une page web avec JavaScript ?

Question

Est-il possible de faire une capture d'écran d'une page Web avec JavaScript et de la renvoyer au serveur ?

Je ne suis pas tellement préoccupé par les questions de sécurité du navigateur, etc. que la mise en œuvre serait pour HTA . Mais est-ce possible ?

Answer 1

Google fait cela dans Google+ et un développeur talentueux a fait de l'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/

Answer 2

Je l'ai fait pour un HTA en utilisant un contrôle ActiveX. Il a été assez facile de construire le contrôle en VB6 pour faire la capture d'écran. J'ai dû utiliser l'appel API keybd_event parce que 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 permet que de placer la fenêtre dans le presse-papiers.

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

Answer 3

Une autre solution possible que j'ai découverte est http://www.phantomjs.org/ qui permet de faire très facilement des captures d'écran de pages et bien d'autres choses encore. Bien que mes exigences initiales pour cette question ne soient plus valables (un autre travail), je vais probablement intégrer PhantomJS dans de futurs projets.

Answer 4

Pounder's si c'est possible de le faire en plaçant tous les éléments du corps dans une toile puis en utilisant canvas2image ?

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

Answer 5

Une façon possible de le faire, si vous êtes sous Windows et que .NET est installé, vous pouvez le 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 ensuite, via PHP, vous pouvez le faire :

exec("CreateScreenShot.exe -url http://.... -save C:/shots domain_page.png");

Vous avez alors la capture d'écran du côté serveur.