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




print screen javascript (2)

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.


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.


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.







screenshot