Pregunta Usar HTML5 / Canvas / JavaScript para tomar capturas de pantalla del navegador


"Informar 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.

Google Feedback Tool Screenshot Captura de pantalla de Jason Small, publicada en pregunta duplicada. 

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


794
2018-02-06 06:58


origen


Respuestas:


JavaScript puede leer el DOM y renderizar una representación bastante precisa de eso usando canvas. He estado trabajando en una secuencia de comandos que convierte html en una imagen de lienzo. Decidió hoy hacer una implementación de él para enviar retroalimentaciones 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, sino que construye la captura de pantalla basada en la información disponible en la página.

Eso no requiere ninguna representación del servidor, ya que la imagen completa se crea en el navegador del cliente. El script HTML2Canvas en sí se encuentra todavía en un estado muy experimental, ya que no analiza casi la misma cantidad de atributos de CSS3 que yo 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 pudo admitir más, simplemente no he tenido tiempo de hacerlo más compatible con cross browser).

Para obtener más información, eche un vistazo a los ejemplos aquí:

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

editar La secuencia de comandos html2canvas ahora está disponible por separado aquí y algo ejemplos aquí.

editar 2 En esta presentación, Elliott Sprehn, del equipo de Google Feedback, puede encontrar otra confirmación de que Google usa un método muy similar (de hecho, según la documentación, la única diferencia importante es su método asincrónico de desplazamiento / dibujo): http://www.elliottsprehn.com/preso/fluentconf/


1013
2017-07-13 11:29



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

Echa un vistazo a este ejemplo:

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

El cliente deberá usar Chrome (por ahora) y deberá habilitar el soporte de captura de pantalla en chrome: // flags.


54
2017-10-29 09:33



Como Niklas menciona puedes usar html2canvas biblioteca para hacer una captura de pantalla usando el navegador js. Desarrollaré la respuesta en este punto y proporcionaré un ejemplo de cómo hacer una captura de pantalla usando esta biblioteca (en este marco de preguntas):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Screen shoter</title>        
    <style>.container { margin-top: 10px; border: solid 1px black; }  </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>
<body>

    <div>Screenshot tester</div>
    <button onclick="report()">Take screenshot</button>

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

    <script>
        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


                },
            });
        }
    </script>
</body>
</html>

Aquí está ejemplo de trabajo.

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


1
2017-07-01 19:25