¿Tomar 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 enviarla al servidor?

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

Answer 1

Hice esto para una HTA usando un control ActiveX.Fue bastante fácil crear el control en VB6 para tomar la captura de pantalla.Tuve que usar la llamada API keybd_event porque SendKeys no puede ejecutar 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 sólo te lleva hasta el punto de llevar la ventana al portapapeles.

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

Answer 2

Google está haciendo esto en Google+ y un desarrollador talentoso lo realizó mediante ingeniería inversa y lo produjo. http://html2canvas.hertzen.com/ .Para trabajar en IE necesitarás una biblioteca de soporte de lienzo como http://excanvas.sourceforge.net/

Answer 3

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

Answer 4

Pounder, ¿si esto es posible hacer colocando los elementos de todo el cuerpo en un lienzo y luego usando canvas2image?

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

Answer 5

Una posible forma de hacer esto, si se ejecuta en Windows y tiene .NET instalado, 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 puedes hacer:

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

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

Answer 6

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

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

Answer 7

Teníamos un requisito similar para informar errores.Como era para un escenario de intranet, pudimos usar complementos del navegador (como Disparo de fuego para Firefox y Captura de pantalla de IE para Internet Explorer).

Answer 8

El SnapEngage usa un subprograma de Java (1.5+) para hacer una captura de pantalla del navegador.HASTA DONDE SE, java.awt.Robot debería hacer el trabajo: el usuario sólo tiene que permitir que el subprograma lo haga (una vez).

Y acabo de encontrar una publicación al respecto:

• Pregunta de desbordamiento de pila Código JavaScript para tomar una captura de pantalla de un sitio web sin usar ActiveX
• Entrada en el blog Cómo funciona SnapABug y qué deberían hacer

Answer 9

Puedes lograrlo usando HTA y VBScript.Simplemente llame a una herramienta externa para realizar la captura de pantalla.Olvidé cuál es el nombre, pero en Windows Vista hay una herramienta para hacer capturas de pantalla.Ni siquiera necesitas una instalación adicional para ello.

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

Como mencionaste HTA, supongo que estás en Windows y (probablemente) conoces tu entorno (p. ej.SO y versión) muy bien.

Answer 10

Una gran solución para tomar capturas 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, primero debes obtener la autorización. clave de aplicación + secreto y el SDK gratuito

Luego, en tu aplicación, los pasos de implementació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>

La captura de pantalla se puede personalizar con diferentes parámetros.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 espera un momento y la imagen aparecerá automáticamente en la parte inferior de la página, sin necesidad de recargar la página.

Hay otras funcionalidades para el mecanismo de captura de pantalla que puedes explorar. aquí.

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

Answer 11

encontre eso dom a imagen Hizo un buen trabajo (mucho mejor que html2canvas).Vea la siguiente pregunta y respuesta: https://stackoverflow.com/a/32776834/207981

Esta pregunta trata sobre cómo enviar esto nuevamente al servidor, lo cual debería ser posible, pero si desea descargar las imágenes con las que querrá combinarlas. FileSaver.js, y si desea descargar un zip con varios archivos de imagen, todos generados en el lado del cliente, eche un vistazo a jszip.

Answer 12

Si está dispuesto a hacerlo en el lado del servidor, existen opciones como fantasmajs, que ahora está en desuso.La mejor manera de hacerlo sería Headless Chrome con algo como Titiritero en Nodo.JS.Capturar una página web usando Puppeteer sería tan simple como sigue:

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

Sin embargo, requiere Chrome sin cabeza para poder ejecutarse en sus servidores, lo que tiene algunas dependencias y puede no ser adecuado en entornos restringidos.(Además, si no está utilizando Node.JS, es posible que deba encargarse de la instalación/inicio de los navegadores usted mismo).

Si está dispuesto a utilizar un servicio SaaS, existen muchas opciones, como

• Restpack
• Caja de URL
• Capa de captura de pantalla