pantalla - javascript screenshot

Usando HTML5/Canvas/JavaScript para tomar capturas de pantalla en el navegador

Question

El "Informe de un error" o "Herramienta de comentarios" de Google le permite seleccionar un área de la ventana de su navegador para crear una captura de pantalla que se envía con sus comentarios sobre un error.

_{Captura de pantalla de Jason Small, publicada en una pregunta duplicada .}

¿Cómo estan haciendo esto? La API de comentarios de JavaScript de Google se carga desde here y su descripción general del módulo de comentarios demostrará la capacidad de captura de pantalla.

Answer 1

Como mencionó Niklas , puede usar la biblioteca html2canvas para hacer capturas de pantalla usando el navegador js. Desarrollaré la respuesta en este punto y daré un example de cómo hacer una captura de pantalla usando esta biblioteca (en este marco de pregunta):

function report() {
  let region = document.querySelector("body"); // whole screen
  html2canvas(region, {
    onrendered: function(canvas) {
      let pngUrl = canvas.toDataURL();
      let img = document.querySelector(".screen");
      img.src = pngUrl; // pngUrl contains screenshot graphics data in url form

      // here you can allow user to set bug-region
      // and send it with ''pngUrl'' to server


    },
  });
}

.container {
  margin-top: 10px;
  border: solid 1px black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div>Screenshot tester</div>
<button onclick="report()">Take screenshot</button>

<div class="container">
  <img width="75%" class="screen">
</div>

En la función de report() que se onrendered después de obtener la imagen como uri de datos, puede mostrarla al usuario y permitirle dibujar "región de error" con el mouse y luego enviar las coordenadas de captura de pantalla y región al servidor.

Answer 2

Su aplicación web ahora puede tomar una captura de pantalla ''nativa'' de todo el escritorio del cliente usando getUserMedia() :

Echa un vistazo a este ejemplo:

https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

El cliente tendrá que usar Chrome (por ahora) y deberá habilitar la compatibilidad con la captura de pantalla en chrome: // flags.

Answer 3

JavaScript puede leer el DOM y generar una representación bastante precisa de eso utilizando canvas . He estado trabajando en un script que convierte HTML en una imagen de lienzo. Decidió hoy hacer una implementación de esto en el envío de comentarios como usted describió.

El script le permite crear formularios de comentarios que incluyen una captura de pantalla, creada en el navegador del cliente, junto con el formulario. 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 hace una captura de pantalla real, pero crea la captura de pantalla según la información disponible en la página.

No requiere ninguna representación del servidor , ya que toda la imagen se crea en el navegador del cliente. El script HTML2Canvas en sí todavía se encuentra en un estado muy experimental, ya que no analiza la mayor parte de los atributos de CSS3 que quisiera, ni tiene soporte para cargar imágenes CORS incluso si hubiera un proxy disponible.

Todavía es bastante limitada la compatibilidad del navegador (no porque no se pueda admitir más, simplemente no he tenido tiempo de hacerlo más compatible con todos los navegadores).

Para más información, mira los ejemplos aquí:

http://hertzen.com/experiments/jsfeedback/

editar El script html2canvas ahora está disponible por separado here y algunos ejemplos aquí .

edit 2 Otra confirmación de que Google utiliza un método muy similar (de hecho, según la documentación, la única diferencia importante es su método asíncrono de desplazamiento / dibujo) se puede encontrar en esta presentación de Elliott Sprehn del equipo de Google Feedback: http://www.elliottsprehn.com/preso/fluentconf/