Tome una captura de pantalla de una página web con JavaScript?

Question

¿Es posible tomar una captura de pantalla de una página web con JavaScript y luego volver a enviarla al servidor?

No me preocupan tanto los problemas de seguridad del navegador. etc. ya que la implementación sería para HTA. ¿Pero es posible?

Answer 1

He hecho esto para una HTA usando un control ActiveX. Fue bastante fácil construir el control en VB6 para tomar la captura de pantalla. Tuve que usar la llamada a la API keybd_event porque SendKeys no puede hacer PrintScreen. Aquí está el código para eso:

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 

Eso solo le lleva hasta llegar a la ventana del portapapeles.

Otra opción, si la ventana que desea una captura de pantalla es una HTA, sería simplemente usar una XMLHTTPRequest para enviar los nodos DOM al servidor, luego crear las capturas de pantalla del lado del servidor.

Answer 2

Puede lograr eso usando HTA y VBScript. Simplemente llame a una herramienta externa para hacer la captura de pantalla. Olvidé su nombre, pero en Windows   Vista hay una herramienta para hacer capturas de pantalla. Ni siquiera necesita una instalación adicional para ello.

En cuanto a automático, depende totalmente de la herramienta que utilice. Si tiene una API, estoy seguro de que puede activar la captura de pantalla y el proceso de guardado a través de un par de llamadas de Visual Basic sin que el usuario sepa que usted hizo lo que hizo.

Como mencionaste HTA, asumo que estás en Windows y (probablemente) conoces muy bien tu entorno (por ejemplo, el sistema operativo y la versión).

Answer 3

Teníamos un requisito similar para reportar errores. Dado que era para un escenario de intranet, pudimos usar complementos de navegador (como Fireshot para Firefox y IE Screenshot para Internet   Explorer).

Answer 4

Puede que esta no sea la solución ideal para usted, pero aún así vale la pena mencionarla.

Snapsie es un objeto de código abierto, ActiveX que permite capturar y guardar capturas de pantalla de Internet Explorer. Una vez que el archivo DLL está registrado en el cliente, debe poder capturar la captura de pantalla y cargar el archivo en el servidor con JavaScript. Inconvenientes: necesita registrar el archivo DLL en el cliente y funciona solo con Internet   Explorer.

Answer 5

El SnapEngage usa un Java applet (1.5+) para hacer una captura de pantalla del navegador. AFAIK, java.awt.Robot debería hacer el trabajo; el usuario solo tiene que permitir que el applet lo haga (una vez).

Y sólo he encontrado un post al respecto: pregunta

• desbordamiento de pila JavaScript code to take a screenshot of a website without using ActiveX
• Blog post How SnapABug works – and what they should do

Answer 6

Pounder de si esto es posible hacerlo mediante el establecimiento de la elementos del cuerpo entero en un canvase y luego usar canvas2image?

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

Answer 7

Una posible manera de hacer esto, si se ejecuta en Windows y tener instalado .NET que puede hacer:

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; 
} 

Y luego a través de PHP que puede hacer:

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

Luego tiene la captura de pantalla en el lado del servidor.

Answer 8

Google está haciendo esto en Google+ y un desarrollador talentoso lo diseñó de forma inversa y produjo http://html2canvas.hertzen.com/. Para trabajar en IE necesitará una biblioteca de soporte de lienzo como http://excanvas.sourceforge.net/

Answer 9

Otra posible solución que he descubierto es http://www.phantomjs.org/ que permite tomar capturas de pantalla de páginas y mucho más. Aunque mis requisitos originales para esta pregunta ya no son válidos (trabajo diferente), es probable que integre PhantomJS en proyectos futuros.

Answer 10

Una gran solución para tomar una captura de pantalla en Javascript es la de https://grabz.it.

Tienen una API de captura de pantalla flexible y fácil de usar que puede ser utilizada por cualquier tipo de aplicación JS.

Si quieres probarlo, en un primer momento que debe obtener la autorización app key + secret y la free SDK

Luego, en su aplicación, las medidas de aplicación serían:

// 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> 

pantalla puede personalizarse con diferente parameters. Por ejemplo:

GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com", 
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create(); 
</script> 

Eso es todo. Luego, simplemente espere un momento y la imagen aparecerá automáticamente en la parte inferior de la página, sin necesidad de volver a cargar la página.

Existen otras funcionalidades para el mecanismo de captura de pantalla que puede explorar here.

También es posible guardar la captura de pantalla localmente. Para eso, necesitarás utilizar la API del lado del servidor GrabzIt. Para obtener más información, consulte la guía detallada here.