Inicio Apuntes FPApuntes DAW Tomar una captura de pantalla utilizando JavaScript

Tomar una captura de pantalla utilizando JavaScript

Utilizando la biblioteca html2canvas

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una vez más aquí. Hoy vengo a dejar un pequeño artículo para un usuari@ que me preguntó alguna forma sencilla de tomar capturas de pantalla con JavaScript. Tras buscar un poco me encontré la librería html2canvas, la cual permite hacer justamente esto de forma más o menor sencilla.

Con el ejemplo que vamos a ver a continuación, si lo que buscas es la forma de tomar una captura de pantalla de una página web o elemento usando JavaScript, esto que vamos a ver, te puede ser de utilidad. Como decía, aquí veremos cómo tomar capturas de pantalla y descargarlas o imprimir la pantalla fácilmente utilizando JavaScript, mientras hacemos uso de la biblioteca html2canvas. Esta biblioteca se usará solo para capturar capturas de pantalla. Para descargar capturas de pantalla, se utilizará el canvas de JavaScript. En cambio para imprimir la pantalla utilizaremos la función print() de JavaScript.

Código para tomar una captura de pantalla con JavaScript

Para probar este ejemplo, vamos a crear un archivo llamado index.html, y dentro solo será necesario pegar el siguiente código. En el código, se puede ver que se importa la biblioteca html2canvas antes del cierre de head. Además se incluyen tres botones, que se utilizan para tomar capturas de pantalla y mostrarla en pantalla, el otro para realizar la captura y descargarla, y el tercero servirá para imprimir la pantalla.

Aplicación para tomar una captura de pantalla
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Toma una captura de pantalla utilizando JavaScript</title>
    <!-- Importar librería html2canvas -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  </head>
  <body>
    <!-- Datos para tomar la captura de pantalla y descargar -->
    <h1>Toma una captura de pantalla / descárgala</h1>
   
    <ol>
      <li>Elemento 1 de la lista</li>
      <li>Elemento 2 de la lista</li>
      <li>Elemento 3 de la lista</li>
      <li>Elemento 4 de la lista</li>
    </ol>
   
    <img src="img/logo.png" alt="logo" /> <!--imagen mostrada en pantalla-->

    <br />
   
    <a href="https://entreunosyceros.net" title="entreunosyceros.net">entreunosyceros</a>
   
    <br />
   
    <p>
      Haz clic en el botón para tomar una <strong>captura de pantalla</strong> o
      <strong>descarga la captura de pantalla</strong>
      de esta página. También se puede <strong>imprimir</strong> directamente.
    </p>
   
    <!--Botón para mostrar la captura de pantalla-->
    <button id="take-src-only" onclick="clickEnviar(this)">
      Tomar captura de pantalla
    </button>
    <!--Botón para tomar la captura de pantalla y descargarla-->
    <button>Tomar captura de pantalla y descargarla</button>
    <!--Botón imprimir pantalla-->
    <input type="button" value="Imprimir" onclick="javascript:window.print()" />
   
    <hr />
    <br />
    
    <div id="wrapper"></div> <!--Lugar en el que se va a imprimir el título para la captura de pantalla-->

    <script>
      // Función para deshabilitar el botón captura de pantalla tras hacer clic sobre este la primera vez
      function clickEnviar(boton) {
        boton.disabled = true;
      }

      const srcElement = document.querySelector("body"),
      btns = document.querySelectorAll("button");
      btns.forEach((boton) => { // Recorrer cada botón

        // Añadir evento click a cada botón
        boton.addEventListener("click", () => {
          // Creando lienzo de elemento usando html2canvas
          html2canvas(srcElement).then((canvas) => {
            // Agregando lienzo/captura de pantalla al cuerpo y el título mostrado en azul
            if (boton.id === "take-src-only") {
              let titulo = document.createElement("h1");
              titulo.innerHTML = "Imagen de la captura";
              titulo.style.color = "blue";
              let wrapper = document.getElementById("wrapper");
              wrapper.appendChild(titulo);
              return document.body.appendChild(canvas);
            }

            // Descarga lienzo/captura de pantalla
            const a = document.createElement("a");
            a.href = canvas.toDataURL();
            a.download = "captura-pantalla.jpg"; // Nombre de la captura que se va a guardar
            a.click();
          });
        });
      });
    </script>
  </body>
</html>

Y con esto todo estará listo para tomar una captura de pantalla de la página web, descargarla o directamente imprimirla. En el código se pasa el cuerpo como un elemento de captura de pantalla, pero se puede pasar cualquier elemento y capturar una captura de pantalla de acuerdo los sus requisitos. Además hay una función que deshabilita el botón de captura de pantalla cuando se pulsa la primera vez.

Hay que aclarar que la biblioteca html2canvas en realidad no toma una captura de pantalla de la página web. Lo que hace en realidad es construir una representación de la página basada en las propiedades que lee del DOM. Después devuelve el lienzo como una imagen. Por lo tanto, la imagen que devuelve puede no ser 100 % precisa en comparación con la página original. Se puede obtener más información sobre la biblioteca html2canvas en la documentación oficial.

El poder realizar capturas de pantalla, pueden ser una parte valiosa de las aplicaciones web. Por eso añadir algo como lo que acabamos de ver, añadiría un plus a nuestras aplicaciones, ya que las capturas de pantalla se utilizan para múltiples propósitos en las aplicaciones. Si quieres ver esta aplicación funcionando, puedes utilizar el siguiente link.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.