Quiero agregar un botón a uno de nuestros sitios web que permitirá al usuario presentar un error con nuestro sistema de seguimiento de errores.¿Cómo tomar una captura de pantalla de una página web?
Una de las solicitudes de características es que se envíe un encabezado de pantalla de la página en cuestión.
Sin instalar algo en la máquina de los usuarios finales, ¿cómo puedo hacer esto? ¿Tiene javascript algún tipo de api de tapa de pantalla?
Usted puede agarrar el innerHTML de la página y luego procesarlo en el servidor:
document.getElementsByTagName('html')[0].innerHTML;
// this would also be interactive (i.e. if you've
// modified the DOM, that would be included)
No es exactamente una captura de pantalla, pero, en cierto sentido, es mejor. Puede ver no solo cómo se veía la página, sino también ver el estado de la página en el momento en que el usuario la estaba viendo. –
Sin embargo, tenga en cuenta que si el navegador específico de un usuario (o peor, la configuración de su navegador) es el culpable, no podrá ver el problema hasta que pueda recrear el entorno del usuario. – AaronSieb
Además, si ha realizado cambios en el DOM en JavaScript, es posible que no aparezcan como esperaba. –
No, javascript no tiene algo como esto.
Me temo que esto será bastante difícil. No puedo pensar en nada que pueda hacer esto sin instalar en la computadora de los usuarios.
Me gustaría que se demuestre que está equivocado, pero al menos esta es una respuesta para usted.
Desafortunadamente, tengo que estar de acuerdo. No puede obtener la imagen sin instalar _something_ en la máquina del usuario. Lo que puedes hacer es enviar el _html_ exacto o el usuario está viendo, pero incluso eso podría estar desactualizado si has realizado una gran cantidad de manipulación de DOM. –
Sin mencionar que tendrá que guardar todos los CSS y JS externos para recrear la página. Luego, deberá asegurarse de que estén guardados en las mismas rutas relativas a menos que desee manipular el HTML. – cbmeeks
Ver this question. Básicamente, no, no con javascript. Quizás con ActiveX, pero eso es volver a instalar cosas en la PC del cliente.
Considere escribir un script del lado del servidor que repita exactamente la solicitud del usuario (suponiendo que no sea después de un POST) y que almacene el archivo html resultante.
Usted puede mirar en el uso de una solución basada en web, como el ofrecido en Super Screenshot! o WebShotsPro.com. Dependiendo de sus necesidades, como capturas de pantalla de áreas específicas de páginas o páginas inaccesibles del mundo exterior, puede que no funcione para usted, pero es una idea.
Esta es una aplicación interna, por lo que salir a la calle no funcionará. Buenos enlaces sin embargo. – NotMe
Estoy de acuerdo con las otras respuestas - no hay dados.
Sin embargo, existe un complemento de Firefox, el Pearl Crescent Page Saver, que podría valer la pena examinar para las tareas relacionadas.
Tome un vistazo a pagecrop (implementado con jQuery + jCrop plug-in)
No creo que esto tome una captura de pantalla de la página. Simplemente lo envuelve en un iframe, luego reduzco la vista a los parámetros especificados. No se guardan datos de entrada, no obtiene ninguna información de depuración útil. – Martin
me gustaría sugerir algún tipo de integración con FireShot que es un complemento gratuito Firefox/IE.
Debo estar perdiendo algo, pero no puedes simplemente ...
Prensa PrtScr en el teclado y pegar en el correo electrónico.
De hecho, Alt + PrtScn copiará solo la ventana activa al portapapeles, evitando la copia de ventanas circundantes con información confidencial. –
Esto puede funcionar en una máquina con Windows, ¿qué tal una Mac/LINUX/etc.? – LarryH
Podrían hacer esto, pero no me permite capturar todas las otras cosas que quiero de la página. – NotMe
Obtenga toda la información que pueda sobre el entorno de usuario mediante jQuery. (jQuery.support)/user agent/cookies/form input values, url (para obtener los parámetros y saber qué página tiene un error)
Envía la fuente de la página como mencionó Moff. Intente serializar el DOM tal como está ahora para que pueda comparar lo que es diferente de la página original.
También es útil enviar la fuente de la página si necesita conservarla para fines históricos, ya que cuando actualice la página, se volverá diferente.
No estoy seguro de por qué fue downvoted. Esta es una buena sugerencia. – NotMe
complementos de Chrome https://chrome.google.com/extensions/detail/ckibcdccnfeookdmbahgiakhnjcddpki
También puede echar un vistazo a cómo Evernote hace su captura de pantalla y tal vez usted puede atar a esa o crear su propia extensión de cromo. https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc?hl=en
Compruebe las respuestas aquí para ver si hay algún trabajo para usted: http://stackoverflow.com/questions/60455/take-a-screenshot-of-a-webpage-with-javascript – gpojd
Pregunta similar con más arriba- respuestas a la fecha: http://stackoverflow.com/questions/4340056/can-you-take-a-screenshot-of-the-page-using- canvas – nullability