Node.JS

Tomar captura o foto de una página web con Node JS, PhantomJS y node-webshot

En este post explicaré cómo tomar una captura de pantalla de cualquier página web con Node.JS. Es decir, tomar un screenshot de un sitio de internet como si lo visitáramos, pero sin realmente visitarlo.

Vamos a obtener la página web como una imagen usando JavaScript del lado del servidor. Para esto vamos a usar Node JS, PhantomJS y un módulo llamado node-webshot.

Código para guardar página web como imagen usando Node JS

Lo que alcanzaremos al final será guardar una página web como una imagen PNG. También veremos algunas opciones que el paquete ofrece.

Requisitos y recomendaciones

Instala Node y NPM o actualiza NPM.

Instalar librería

En caso de que todavía no tengas un proyecto iniciado, ejecuta:

npm init -y

Para instalar el paquete ejecuta:

npm install --save node-webshot

Eso instalará las dependencias y paquetes necesarios, entre ellos PhantomJS que será un ejecutable. En mi caso se ve así:

Instalar node-webshot para tomar screenshot de página web

Ejemplo de uso de node-webshot

Requerimos el paquete con:

require("webshot")

Después de eso ya podemos tomar una captura de una página web y guardarla en el disco duro. Veamos un ejemplo en donde guardamos la página de Facebook como una imagen PNG:

/**
 * Ejemplificar uso de node-webshot con PhamtomJS
 * para guardar una página web como una imagen
 * 
 * @author parzibyte
 */// Requerir módulo
const webshot = require("node-webshot");

// Algunas constantes explicativas
const SITIO_WEB = "https://www.facebook.com/",
    NOMBRE_IMAGEN_SALIDA = "salida.png";

// Opciones para tomar captura
const OPCIONES = {
    customHeaders: {
        'Accept-Language': 'es_LA', // Lenguaje de la página
    },
    shotSize: {
        width: 'all',
        height: 'all'
    },
    screenSize: {
        width: 1024, // Anchura de pantalla
        height: 760, // Altura de pantalla
    },
    // Indicar que "somos" Chrome en Windows
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36'
};

// Función que se llama cuando la captura se ha tomado
const cuandoSeTomeCaptura = err => {
    // Puede que haya un error
    if (err) {
        console.log("Lo siento, ocurrió un error: ", err);
    } else {
        console.log(`La página ${SITIO_WEB} ha sido guardada en ${NOMBRE_IMAGEN_SALIDA}`);
    }
};

// Ahora sí, tomar captura o screenshot
webshot(SITIO_WEB, NOMBRE_IMAGEN_SALIDA, OPCIONES, cuandoSeTomeCaptura);

La forma más básica de esto es llamar a la función webshot que toma 4 argumentos:

  1. URL de la página web o sitio
  2. Ruta del archivo en donde se escribirá la imagen
  3. Un objeto con opciones para controlar mejor la captura
  4. Una función que será llamada al finalizar, a la que probablemente se le pase un error en caso de que exista

Una cosa importante es la lista de opciones. En ella especificamos cómo será la captura. Con la opción de screenSize indicamos el tamaño de la pantalla; si quisiéramos, podríamos ver un sitio como se vería en un iPhone, en una tableta o cualquier lugar cambiando los pixeles.

Por otro lado, shotSize se refiere al tamaño de la captura que se toma. En este caso ambas opciones están en all para que tome una captura del sitio completo, es decir, como si hiciera scroll por todo el contenido.

Dos trucos que apliqué son el userAgent para mentir o indicar que somos Chrome (podríamos indicar que somos otro navegador) y la opción del encabezado del lenguaje para ver las páginas en español en caso de que se pueda.

Lo del encabezado de idioma ya lo habíamos visto con la API de DuckDukGo.

Conclusiones

Esta librería de node-webshot funciona para muchísimas páginas. La única razón de que falle sería el bloqueo de nuestra IP por parte de las páginas o porque realmente hubo un error fatal.

Personalmente la he usado con muchísimos sitios y no me ha dado problemas.

Cabe mencionar que hay otras opciones interesantes como la espera de determinado tiempo antes de tomar la captura, todo ello está en el sitio del módulo.

Lee más sobre JavaScript o Node.JS.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

17 horas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

1 semana hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

1 semana hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

1 semana hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

1 semana hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

1 semana hace

Esta web usa cookies.