¿Tomar una captura de pantalla de una página web con JavaScript?

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

No estoy tan preocupado por los problemas de seguridad del navegador. etc. ya que la implementación sería para HTA . Pero es posible?

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 keybd_event API 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 te lleva hasta la ventana del portapapeles.

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

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

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 fácilmente. Si bien mis requisitos originales para esta pregunta ya no son válidos (trabajo diferente), probablemente integre PhantomJS en proyectos futuros.

Pounder's si esto es posible hacerlo al configurar los elementos de todo el cuerpo en un contenedor y luego usar canvas2image?

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

Una posible forma de hacerlo, si se ejecuta en Windows y tiene instalado .NET, puede hacer lo siguiente:

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.

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

Snapsie es un objeto ActiveX de código abierto 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. Inconvenientes: necesita registrar el archivo DLL en el cliente y solo funciona con Internet Explorer.

Tuvimos un requisito similar para informar errores. Como era para un escenario de intranet, pudimos usar complementos del navegador (como Fireshot para Firefox e IE Screenshot para Internet Explorer).

El SnapEngage utiliza un applet de Java (1.5 +) para hacer una captura de pantalla del navegador. AFAIK, java.awt.Robotdebe hacer el trabajo: el usuario solo tiene que permitir que el applet lo haga (una vez).

Y acabo de encontrar una publicación al respecto:

• Código JavaScript de la pregunta de desbordamiento de pila para tomar una captura de pantalla de un sitio web sin usar ActiveX
• Publicación de blog Cómo funciona SnapABug y qué deben hacer

Puede lograr eso usando HTA y VBScript . Simplemente llame a una herramienta externa para hacer la captura de pantalla. Olvidé cuál es el 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 lo 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 hizo lo que hizo.

Dado que mencionó HTA, supongo que está en Windows y (probablemente) conoce muy bien su entorno (p. Ej., SO y versión).

Descubrí que dom-to-image hizo un buen trabajo (mucho mejor que html2canvas). Consulte la siguiente pregunta y respuesta: https://stackoverflow.com/a/32776834/207981

Esta pregunta se refiere a enviar esto nuevamente al servidor, lo que debería ser posible, pero si está buscando descargar las imágenes, querrá combinarlo con FileSaver.js , y si desea descargar un archivo zip con múltiples archivos de imagen todos generados del lado del cliente eche un vistazo a jszip .

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 desea probarlo, al principio debe obtener la clave de la aplicación de autorización + secreto y el SDK gratuito

Luego, en su 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 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.

Hay otras funcionalidades en el mecanismo de captura de pantalla que puede explorar aquí .

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

Si está dispuesto a hacerlo en el lado del servidor, hay opciones como PhantomJS , que ahora está en desuso. La mejor manera de hacerlo sería Headless Chrome con algo como Puppeteer en Node.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, hay muchas opciones, como

• Restpack
• UrlBox
• Capa de captura de pantalla

Esta pregunta es antigua, pero tal vez todavía haya alguien interesado en una respuesta de vanguardia:

Puedes usar getDisplayMedia:

https://github.com/ondras/browsershot

A partir de hoy Abr 2020 biblioteca GitHub html2Canvas https://github.com/niklasvh/html2canvas

GitHub 20K estrellas | Tuberías azules: éxito | Descargas 1.3M / mes |

cita: " Representador HTML de JavaScript El script le permite tomar" capturas de pantalla "de páginas web o partes de él, directamente en el navegador del usuario . La captura de pantalla se basa en el DOM y, como tal, puede no ser 100% precisa para la representación real ya que no realiza una captura de pantalla real, pero construye la captura de pantalla en función de la información disponible en la página.

Hice una función simple que usa rasterizeHTML para construir un svg y / o una imagen con el contenido de la página.

Echale un vistazo :

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