Tomar capturas de pantalla en el navegador (o 'del lado del cliente') tiene que ver con las compensaciones: no existe una solución perfecta para cada situación. Echemos un vistazo a tres formas diferentes en que puede tomar capturas de pantalla y luego cómo puede usarlas enviándolas a un servidor o permitiendo que el usuario descargue la imagen. Las capturas de pantalla pueden ser una parte muy valiosa e importante de su aplicación JavaScript. Empresas como Google las usan para de los usuarios, productos como usan capturas de pantalla como parte central de su producto y son excelentes para generar exportaciones de datos (como gráficos). obtener comentarios BugHerd Pedir a los usuarios que tomen una captura de pantalla de lo que están viendo genera mucha fricción. Primero, necesitan conocer el método abreviado de teclado (que es diferente de macOS a Windows). Entonces necesitan saber qué hacer con él. Por ejemplo, podrían subirlo a algún lugar como Dropbox o enviártelo por correo electrónico. La mayoría de los usuarios probablemente tampoco sabrán cómo cambiar el tamaño u optimizar la calidad de la captura de pantalla. Si aloja las capturas de pantalla usted mismo, debe asegurarse de que ocupen el menor espacio posible, lo que a su vez garantiza que gaste lo menos posible. Aquí hay tres formas en que puede capturar automáticamente capturas de pantalla para sus usuarios: 1. Uso de html2canvas para capturas de pantalla del lado del cliente Niklas von Hertzen respondió una pregunta de StackOverflow en diciendo que es posible colocar el DOM de la página en un lienzo HTML y usarlo para generar una captura de pantalla. Después de hacer público el código, actualizó su respuesta con la idea original que es . Una investigación posterior reveló que Google usa una para generar automáticamente capturas de pantalla de los usuarios que brindan comentarios, lo que demuestra las escalas de implementación y es lo suficientemente sólida para productos grandes. 2011 html2canvas técnica muy similar Cómo usar html2canvas La idea es bastante simple: captura el DOM (HTML de la página) cuando desea generar una captura de pantalla y pasa ese DOM a un lienzo HTML. Bajo ciertas restricciones, el elemento canvas puede generar un URI de datos de los contenidos que contiene (como una cadena base64). El siguiente ejemplo genera una captura de pantalla y la abre en la ventana como una imagen. screenshotTarget = .body; html2canvas(screenshotTarget).then( { base64image = canvas.toDataURL( ); .location.href = base64image; }); const document ( ) => canvas const "image/png" window Pros/Cons del método canvas ventajas Rápido: no necesita esperar a ningún servicio externo, todo esto se hace en el clienteActualizado regularmente: aunque html2cavnas no se actualiza a diario, ve actualizaciones y correcciones regularmente cada pocos mesesMuy popular: la comunidad es fuerte y activa, hay hay más de 40 solicitudes de extracción abiertas y 600 problemas registrados (hasta julio de 2020). También hay preguntas regulares (¡y respuestas!) en Stack Overflow. Buen soporte de navegador: html2canvas tiene más de 9 años y aún mantiene . un excelente soporte de navegador Contras No es compatible con Shadow DOM o Web Components: hay una para agregar soporte, y parece que los mantenedores están interesados en fusionarlo. Restricciones de origen cruzado: cuando agrega elementos que contienen solicitudes al lienzo (como imágenes , hojas de estilo, etc.), están sujetas a las mismas políticas de COR que las solicitudes normales. solicitud de extracción abierta No es compatible con todas las propiedades de CSS: las propiedades se agregan y configuran manualmente, por lo que una cobertura del 100 % es difícil. La documentación indica que "html2canvas nunca tendrá compatibilidad completa con CSS". Frágil para las actualizaciones: html2canvas puede ser frágil para las actualizaciones del navegador, lo que ocasionalmente rompe la funcionalidad existente. 2. Genera capturas de pantalla con getDisplayMedia Casi al mismo tiempo que se lanzó html2canvas, la idea de que la web podría admitir videollamadas nativas estaba cobrando mucha fuerza. En 2011, Google lanzó Hangouts, una plataforma de video y audio en tiempo real. Para admitir Hangouts, Google presentó la idea (y alguna implementación) de Real-Time Communication (RTC) que luego se desarrolló en WebRTC. Desde entonces, WebRTC se ha convertido en un estándar en todos los navegadores modernos, y es la infraestructura que proporciona a la web comunicación de video, audio y datos en tiempo real. Una parte de WebRTC es , que se utiliza como API para compartir pantalla. Puede capturar una imagen fija de un video, como compartir la pantalla, que esencialmente se convierte en una captura de pantalla. Veamos un ejemplo básico: getDisplayMedia capture = () => { canvas = .createElement( ); context = canvas.getContext( ); video = .createElement( ); { captureStream = navigator.mediaDevices.getDisplayMedia(); video.srcObject = captureStream; context.drawImage(video, , , .width, .height); frame = canvas.toDataURL( ); captureStream.getTracks().forEach( track.stop()); .location.href = frame; } (err) { .error( + err); } }; capture(); const async const document "canvas" const "2d" const document "video" try const await 0 0 window window const "image/png" => track window catch console "Error: " Aunque el ejemplo anterior no es tan pequeño como el primero, sigue siendo relativamente fácil seguir lo que sucede. En primer lugar, los elementos de lienzo y video se crean en la memoria, luego el La API se utiliza para solicitar acceso al escritorio o la pestaña del usuario. Una vez que el usuario otorga el permiso, la secuencia de pantalla se establece en el elemento de video y se dibuja en el lienzo. Se extrae una imagen del lienzo utilizando el mismo método que se describe en el ejemplo html2canvas anterior. getDisplayMedia Ventajas y desventajas de la API getDisplayMedia ventajas Buena compatibilidad con los navegadores modernos: es una API nativa, lo que significa que viene integrada en los navegadores modernos, no es necesario ningún script o código de terceros. : puede agregar fácilmente soporte para grabación de video en el futuro, usando la misma APIPixel perfect: es exactamente lo que ve el usuario Extensible : la API getDisplayMedia puede grabar el escritorio o una ventana del navegador, lo que lo hace ideal para tomar una captura de pantalla de algo que no sea su aplicación. Escritorio o pestaña Contras : necesita obtener permisos del usuario para grabar. Dependiendo del navegador, el diálogo de permisos puede verse diferente y, a veces, puede ser confuso. Permisos : debido a que necesita obtener permiso, el usuario puede tardar un tiempo en hacer clic en aceptar y comprender lo que está sucediendo. Si el usuario necesita una captura de pantalla al instante, esta pequeña interacción de la interfaz de usuario retrasará la captura de contenido sensible al tiempo. Lento 3. Capturas de pantalla como servicio Los servicios de captura de pantalla son cada vez más populares, ya que ofrecen una manera fácil de integrar capturas de pantalla en su aplicación existente. Si bien no es del lado del cliente, usar un servicio de captura de pantalla como , o significa que no necesita administrar ninguna infraestructura que tome las capturas de pantalla. url2png Stillio Urlbox Si bien la implementación puede diferir según el servicio, la idea general es la misma. Envía la URL (y los parámetros personalizables como dimensiones, formato y calidad) a un servicio externo y espera una respuesta o escucha la respuesta en otro lugar. Esto generalmente se maneja con un servicio de back-end, así que echemos un vistazo usando url2png y NodeJS y expresa: url2png = ( )( , ); fs = ( ); app.get( , (req, res) => { url2png.readURL(req.query.url, {}).pipe(fs.createWriteStream( )); res.json({ : }) }); const require 'url2png' 'API_KEY' 'PRIVATE_KEY' const require 'fs' '/screenshot' 'screenshot.png' success true El ejemplo anterior toma una solicitud como y luego usa la biblioteca url2png para generar una captura de pantalla. Esa captura de pantalla luego se guarda en el sistema de archivos local, o puede . /screenshot?url=http://google.com.au devolverla en la solicitud Pros/Cons de usar un servicio de captura de pantalla ventajas : los servicios también pueden manejar el posprocesamiento, lo que ofrece la flexibilidad de generar imágenes en diferentes tipos de archivos, tamaños, calidad y más. Posprocesamiento : muchas personas utilizan los servicios y facilitan grandes volúmenes de solicitudes. Infraestructura: no necesita mantener la infraestructura para administrar el proceso de tomar una captura de pantalla. Si está feliz, proyectos como y servicios como son un buen lugar para comenzar. API sólidas PhantomJS SauceLabs Contras : es posible que la captura de pantalla no sea lo que ve el usuario. Por ejemplo, si el usuario ha interactuado con la página o si está autenticado, el servicio de captura de pantalla no podrá mostrar la misma página para una captura de pantalla. Sin estado : de las tres opciones, esta es la única que tiene un costo. Aunque es bastante barato, si maneja grandes volúmenes de capturas de pantalla, podría ser costoso. Costo : los servicios de captura de pantalla pueden tardar varios minutos en generar y devolver una imagen. Tiempo Redondeo Ya sea que esté integrando capturas de pantalla para obtener comentarios o para una función crítica en su aplicación, debe sopesar los pros y los contras de cada solución. El uso de una solución del lado del cliente, como html2canvas o la API getDisplayMedia significa que no tiene que administrar ninguna infraestructura de servidor y, en general, las imágenes se generan con bastante rapidez. Si necesita una representación de lo que está mirando su usuario y no le importa la ventana emergente de permisos a veces obtusa, la es un buen lugar para comenzar. perfecta de píxeles API getDisplayMedia Si desea tomar capturas de pantalla sin depender de un servicio externo, podría ser la opción adecuada para usted. semiprecisas rápidamente html2canvas Finalmente, si está de acuerdo con la implementación técnica y el asociado con ella, un podría ser la mejor opción. subcontratar costo servicio de captura de pantalla

Community Is

Dropbox

Google

Instantly

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

 Add passwordless user experiences to your app

HackerNoon Mobile

Cómo tomar capturas de pantalla en el navegador usando JavaScript

Demasiado Largo; Para Leer

Companies Mentioned

@James_BugHerd

HISTORIAS RELACIONADAS