Hoy vamos a ver cómo agregar un globo o bocadillo a cualquier imagen con un bot de Telegram usando Node y JavaScript para dicha tarea.

Una cosa será el bot de Telegram y otra el procesamiento de la imagen. Podemos usar ambas cosas por separado y mejorar cada una de ellas o combinarlas.

Bot de Telegram - Agregar globo de texto o bocadillo a imagen para memes

Bot de Telegram – Agregar globo de texto o bocadillo a imagen para memes

Técnicamente hablando vamos a escuchar si el usuario envía una imagen en Telegram (ya sea en grupos o en privado) y una vez que la envíe veremos el texto que la acompaña.

En caso de que el texto coincida con la orden vamos a combinar las 2 imágenes, redimensionando el globo o bocadillo según sea el caso y después vamos a responder con esa imagen ya modificada.

Nota: esto fue hecho por diversión para hacer memes y comentar rápidamente en Facebook o similares, aunque se pueden sacar varias cosas de aquí.

Requisitos

Vamos a usar Node y los paquetes dotenv (variables del entorno), node-telegram-bot-api para el bot de Telegram y también sharp para la modificación de imágenes.

También vas a necesitar tu token de bot para Telegram en caso de que quieras probar el proyecto.

Una vez que lo tengas necesitas crear el archivo .env según el archivo .env.example y colocar tu token ahí.

En cuanto a los paquetes ya van en el package.json solo tienes que hacer un npm install.

Escuchando petición de usuario

Vamos a usar bot.on para escuchar cuando el usuario envíe una imagen. Si lo hace vamos a ver el caption que la acompaña para ver si nos está pidiendo que le agreguemos un globo de texto:

Si el caption contiene (ya sea al inicio, centro o final) alguna de las opciones de la línea 7 entonces vamos a agregar el bocadillo a la imagen.

Agregar globo de texto a imagen con Node y sharp

A continuación veamos la función que permitirá agregar el speech bubble a la imagen usando JavaScript del lado del servidor y un Telegram bot.

En la línea 5 cargamos el globo de texto (o sea, la imagen que vamos a poner encima de la original) y lo redimensionamos para que sea del mismo largo que la imagen.

Luego extendemos la imagen original rellenándola de blanco y con composite combinamos ambas imágenes colocando el globo en la esquina superior izquierda, es decir, en left y top 0.

Regresamos un búfer de la imagen ya que la librería así lo permite. De este modo no necesitamos guardarla de manera temporal en el almacenamiento o cosas similares.

Enviando imagen de vuelta al chat

Ahora ya tenemos la imagen modificada como un búfer y ya sabemos que el usuario solicitó la modificación, queda enviársela usando el chatId con la función bot.sendPhoto:

Por cierto, en este caso estoy descargando la imagen con bot.downloadFile ya que no encontré la manera de obtenerla como búfer, así que en este caso sí estoy creando una imagen temporal pero la elimino después con fs.unlink.

Poniendo todo junto

El código completo queda como se ve a continuación, pero si lo quieres junto con el package.json y actualizado te recomiendo que vayas a GitHub ya que si hago actualizaciones las haré ahí:

Recuerda que se ejecuta con node index.js y puedes correrlo incluso localmente en Windows aunque también se puede usar en un servidor.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 6,085 suscriptores

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/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: