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.Captura de pantalla del navegador mediante JavaScript (u otra cosa)
¿Alguna (loca) idea?
Eso parecería ser un agujero de seguridad bastante grande en JavaScript si pudiera 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. Imagine que sucede con su banca en línea ...
Sin embargo, es posible hacer este tipo de cosas fuera de JavaScript. Desarrollé una aplicación Swing que used screen capture code like this que hizo un excelente trabajo al enviar un correo electrónico al servicio de asistencia con una captura de pantalla adjunta cada vez que el usuario encontraba una RuntimeException.
Supongo que se puede experimentar con un applet Java firmado (shock! Horror! Noooooo!) Que se colgó 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.
Por conveniencia, aquí está el código del sitio he vinculado a:
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));
}
...
Ese punto de seguridad no tiene mucho sentido ya que solo puedes controlar todas las pulsaciones de teclas y sus objetivos en JavaScript. –
Piensa en ingresar una contraseña usando una serie de menús desplegables. Monitorear un teclado no ayudará, pero sí una serie de capturas de pantalla. –
Luego puede supervisar los cambios de formulario. A menos que estemos hablando de flash, no hay mucho que JS no pueda monitorear. –
¿Imprimir pantalla? La vieja escuela y un par de teclados, ¡pero funciona!
Puede intentar renderizar toda la página en lienzo y guardar esta imagen en el servidor. diviértete :)
Esto se puede hacer, pero no directamente desde la página web. Puedes hacerlo desde una extensión de Firefox (y, presumiblemente una extensión en varios otros navegadores también, aunque no sé). Ver mi respuesta – MatrixFrog
¿Por qué no? http://ajaxian.com/archives/crazy-times-rendering-html-in- canvas –
¿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.
Esto puede no funcionar para usted, pero en IE puede usar el complemento snapsie. Ya no parece estar en desarrollo, pero la última versión está disponible desde el sitio vinculado.
Una página web no puede hacer esto (o por lo menos, yo estaría muy sorprendido si se pudiera, en cualquier navegador) pero una extensión de Firefox puede. Consulte https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas - cuando esa página dice "privilegios de Chrome", lo que significa que una extensión puede hacerlo, pero una página web no puede hacerlo.
Lo que necesita es un control ActiveX. 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 las necesidades de apoyo (al menos) las respuestas a dos preguntas:
Una captura de pantalla, una visual, es muy necesaria y responde la primera pregunta, pero no puede responder a la segunda.
Como primer intento, intentaría enviar toda la página para soporte. 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 envío 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.
PLUS: ¡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 mentalizado :-)
HTH
- Pete
Estamos recolectando temporalmente estados Ajax, datos en los campos del formulario y la 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.
Tenga una mirada en el botón rojo en la parte inferior de holidaycheck
Por otra parte hay html2canvas de Google. Pero solo es aplicable para navegadores que nunca lo hayan hecho y nunca lo he probado.
He visto a gente bien hacer esto con dos enfoques:
de configuración de un servidor separado para screenshotting y ejecutar un montón de casos Firefox en allí, echa un vistazo a estos dos joya si lo estás haciendo en rubí: selenium-webdriver y headless
uso como una solución alojada http://url2png.com (forma más fácil)
Véase la respuesta compartida aquí para una aplicación relativamente exitosa de este: https://stackoverflow.com/a/6678156/291640
Utilizando: https://github.com/niklasvh/html2canvas
También puede hacer esto con el plugin Fireshot. Yo uso el siguiente código (que extraje del código de la API, así que no es necesario incluir el API JS) para hacer 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.
Quizás http://html2canvas.hertzen.com/ podría ser utilizado. Luego puede capturar la pantalla y luego procesarla.
¡hace un trabajo impresionante! y funciona en todos los navegadores, aunque parece funcionar un poco lento en IE. –
Puede probar PhantomJs, un juego de herramientas de navegación sin cabeza. http://phantomjs.org/
El siguiente ejemplo demuestra la funcionalidad Javascript pantalla básica:
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();
});
entiendo esta entrada es de 5 años de edad, pero por el bien de las futuras visitas Voy a añadir mi propia solución a este problema 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();
usted podría quitar otras partes del DOM cree que son innecesarios, tales como la forma de apoyo 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.
¡Espero que esto funcione para SPAs base Javascript complejos (aplicaciones de una sola página)! – Kieveli
Las etiquetas de secuencia de comandos se eliminan por lo que acaba con HTML estático de lo que ve actualmente, pero no podría interactuar con él. Probablemente no desee mantener las etiquetas de script en un SPA porque probablemente restablecerían o volverían a representar la página. –
Puede capturar la ventana gráfica en la que se encuentra la página, pero realmente dudo que pueda capturar toda la ventana. Eso sería un riesgo de seguridad, ¿no? – Keyo
Hay soluciones para esto en 2013. [Usersnap] (http://www.usersnap.com) se puede instalar tan fácilmente como Google Analytics y obtendrá capturas de pantalla precisas de sus visitantes (no es necesario instalarlas). cualquier cosa. Sin Java, sin Flash, sin ActiveX, sin ningún tipo). – Gregor
Posible duplicado de [Uso de HTML5/Canvas/JavaScript para tomar capturas de pantalla] (http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots) –