print pantalla jscapture imprimir con captura javascript browser screenshot

jscapture - Tome una captura de pantalla del navegador a través de JavaScript(u otra cosa)



screenshot javascript (15)

Por razones de soporte, quiero que un usuario pueda tomar una captura de pantalla de la ventana actual del navegador lo más fácil posible y enviarla al servidor.

¿Alguna idea (loca)?

¿Imprimir pantalla? La vieja escuela y un par de teclados, ¡pero funciona!

En JavaScript? No. Trabajo para una empresa de seguridad (algo así como NetNanny) y la única forma efectiva que hemos encontrado de capturar pantallas del usuario es con una aplicación oculta.

Entiendo que esta publicación tiene 5 años, pero en aras de futuras visitas agregaré mi propia solución aquí, que creo que resuelve la pregunta original de la publicación sin bibliotecas de terceros, aparte de jQuery.

pageClone = $(''html'').clone(); // Make sure that CSS and images load correctly when opening this clone pageClone.find(''head'').append("<base href=''" + location.href + "'' />"); // OPTIONAL: Remove potentially interfering scripts so the page is totally static pageClone.find(''script'').remove(); htmlString = pageClone.html();

Puede eliminar otras partes del DOM que considere innecesarias, como el formulario de soporte si se encuentra en una ventana modal. O puede elegir no eliminar las secuencias de comandos si prefiere mantener alguna interacción con los controles dinámicos.

Envíe esa cadena al servidor, ya sea en un campo oculto o por AJAX, y luego en el lado del servidor simplemente adjunte todo el lote como un archivo HTML al correo electrónico de soporte.

Los beneficios de esto son que obtendrá no solo una captura de pantalla sino toda la página desplazable en su forma actual, además de que puede incluso inspeccionar y depurar el DOM.

Eso podría ser un agujero de seguridad bastante grande en JavaScript si pudieras hacer esto. Imagínese a un usuario malintencionado que instale ese código en su sitio con un ataque XSS y luego haga una captura de pantalla de todo su trabajo diario. Imagínese que eso ocurra con su banca en línea ...

Sin embargo, es posible hacer este tipo de cosas fuera de JavaScript. Desarrollé una aplicación Swing que usaba un código de captura de pantalla como este, que hacía un excelente trabajo enviando un correo electrónico al servicio de ayuda con una captura de pantalla adjunta cada vez que el usuario encontraba una RuntimeException.

Supongo que podrías experimentar con un applet Java firmado (¡shock !, ¡horror! ¡Noooooo!) Que estaba en la esquina. Si se ejecuta con los privilegios de seguridad adecuados en la instalación, podría ser forzado a ejecutar ese tipo de código de captura de pantalla.

Para su comodidad, aquí está el código del sitio al que me he vinculado:

import java.awt.Dimension; import java.awt.Rectangle; import java.awt.Robot; import java.awt.Toolkit; import java.awt.image.BufferedImage; import javax.imageio.ImageIO; import java.io.File; ... public void captureScreen(String fileName) throws Exception { Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize(); Rectangle screenRectangle = new Rectangle(screenSize); Robot robot = new Robot(); BufferedImage image = robot.createScreenCapture(screenRectangle); ImageIO.write(image, "png", new File(fileName)); } ...

Estamos recopilando temporalmente estados Ajax, datos en campos de formulario e información de sesión. Luego volvemos a presentarlo en el mostrador de soporte. Como probamos e integramos para todos los navegadores, apenas existen casos de soporte por motivos de visualización.

Eche un vistazo al botón rojo en la parte inferior en cheque de vacaciones

Alternativamente, hay html2canvas de Google. Pero solo es aplicable para navegadores que nunca lo hayan hecho y nunca lo he probado.

He visto personas hacer esto con dos enfoques:

  1. configura un servidor por separado para la captura de pantalla y ejecuta un montón de instancias de Firefox, echa un vistazo a estas dos gemas si lo haces en ruby: selenium-webdriver y headless

  2. utilice una solución alojada como http://url2png.com (mucho más fácil)

Lo que necesitas es un control X activo. sin eso no me lo puedo imaginar. puede obligar al usuario a instalarlos primero después de que la instalación en los controles activex del lado del cliente debería funcionar y usted puede capturar.

Me parece que el soporte necesita (al menos) las respuestas para dos preguntas:

  1. ¿Cómo se ve la pantalla? y
  2. ¿Por qué se ve de esa manera?

Una captura de pantalla, una visual, es muy necesaria y responde la primera pregunta, pero no puede responder la segunda.

Como primer intento, trataría de enviar toda la página para apoyar. La tecnología de soporte podría mostrar esa página en su navegador (responde a la primera pregunta); y también podría ver el estado actual del html del cliente (ayuda a responder la segunda pregunta).

Intentaré enviar la mayor parte de la página disponible para el cliente JS por medio de AJAX o como la carga de un formulario. También enviaría información no en la página: cualquier cosa que afecte el estado de la página, como cookies o ID de sesión o lo que sea.

El cliente puede tener un botón de enviar para iniciar el proceso.

Creo que eso funcionaría Veamos: necesita algo de CGI en algún lugar del servidor que atrape la página del usuario entrante y la ponga a disposición para brindar soporte, tal vez escribiendo un archivo de disco. Luego, la persona de soporte puede cargar (o cargarse automáticamente) esa misma página. Toda la demás información (cookies, etc.) se puede colocar en la página que admite el acceso.

ADEMÁS: ¡el cliente JS que maneja el botón de envío onclick () también podría incluir cualquier valor de variable JS útil!

Oye, esto puede funcionar! Me estoy emocionando :-)

HTH

- pete

Podría intentar renderizar toda la página en lienzo y guardar esta imagen en el servidor. que te diviertas :)

Puede probar PhantomJs, un juego de herramientas de navegación sin cabeza. http://phantomjs.org/

El siguiente ejemplo de JavaScript demuestra la funcionalidad básica de captura de pantalla:

var page = require(''webpage'').create(); page.settings.userAgent = ''UltimateBrowser/100''; page.viewportSize = { width: 1200, height: 1200 }; page.clipRect = { top: 0, left: 0, width: 1200, height: 1200 }; page.open(''https://google.com/'', function () { page.render(''output.png''); phantom.exit(); });

Puede que esto no funcione para usted, pero en IE puede usar el plugin de snapsie . Ya no parece estar en desarrollo, pero la última versión está disponible desde el sitio vinculado.

Tal vez html2canvas podría ser utilizado. Luego puede capturar la pantalla y luego procesarla.

También puedes hacer esto con el plugin Fireshot. Utilizo el siguiente código (que extraje del código de la API, por lo que no necesito incluir el API JS) para realizar una llamada directa al objeto Fireshot:

var element = document.createElement("FireShotDataElement"); element.setAttribute("Entire", true); element.setAttribute("Action", 1); element.setAttribute("Key", ""); element.setAttribute("BASE64Content", ""); element.setAttribute("Data", "C:/Users/jagilber/Downloads/whatev.jpg"); if (typeof(CapturedFrameId) != "undefined") element.setAttribute("CapturedFrameId", CapturedFrameId); document.documentElement.appendChild(element); var evt = document.createEvent("Events"); evt.initEvent("capturePageEvt", true, false); element.dispatchEvent(evt);

Nota: No sé si esta funcionalidad solo está disponible para la versión paga o no.