English

Read this article in English.

Cómo convertir HTML en imagen en n8n (con un solo nodo)

Si automatizas con n8n, tarde o temprano necesitas generar una imagen dentro de un flujo: un post para redes, una miniatura para un vídeo, un recibo, un certificado o una imagen de Open Graph para que tu enlace se vea bien al compartirlo. La buena noticia es que no hace falta montar un servidor ni instalar nada. Con el nodo HTTP Request de siempre y la API de Cofferdock lo tienes montado en un minuto.

Una aclaración por delante, porque la gente la busca: n8n no trae un nodo específico de "HTML a imagen". Se hace con el nodo HTTP Request llamando a una API que hace el trabajo pesado. Aquí te enseño cuál y cómo, campo a campo.

Qué vas a conseguir

Le mandas tu diseño escrito en HTML (con su CSS, sus imágenes y sus tipografías) y te devuelve la imagen en PNG o JPEG, lista para el siguiente paso de tu flujo. Sin conversiones raras por el medio: la salida del nodo ya es el archivo de imagen.

Algunos usos habituales en n8n:

Lo que necesitas

Paso a paso en el nodo HTTP Request

Añade un nodo HTTP Request y rellénalo así:

Y ya está. La salida del nodo es la imagen como archivo, lista para conectar a Google Drive, Gmail, Telegram o a donde la necesites. Un solo nodo y listo.

Un ejemplo para verlo claro

Imagina que tienes una hoja de Google Sheets con frases y quieres una tarjeta para redes por cada una. El flujo sería:

  1. Un nodo Google Sheets que lee las filas.
  2. Un nodo Set (o Edit Fields) que arma el HTML de la tarjeta metiendo la frase de esa fila.
  3. El nodo HTTP Request de arriba, que convierte ese HTML en imagen.
  4. Un nodo Google Drive que guarda la imagen (o Gmail que la envía).

Cada vuelta del bucle te da una imagen distinta, sin tocar nada a mano. Ese es el tipo de tarea repetitiva que n8n resuelve de maravilla.

Opciones que puedes ajustar

Se añaden como Query Parameters en el mismo nodo:

OpciónPor defectoPara qué sirve
width1200Ancho de la imagen en píxeles.
height630Alto de la imagen en píxeles.
formatpngFormato: png o jpeg.
full_pagefalsePonlo en true si tu diseño es más alto que el alto indicado y quieres capturarlo entero.
wait_ms0Espera unos milisegundos antes de la foto, por si algo tarda en cargar (máximo 5000).

Puedes usar fotos de fondo, logos y tipografías alojadas en internet poniendo su enlace https://… dentro del HTML o del CSS. El diseño se renderiza sin ejecutar JavaScript, así que trabaja con HTML y CSS.

¿Prefieres verlo en código?

Por si quieres probarlo rápido fuera de n8n, la misma llamada con curl:

curl -X POST "https://api.cofferdock.com/capture?width=1200&height=630" \
  -H "x-api-key: TU_LLAVE" \
  -H "Content-Type: text/html" \
  --data-binary "<h1 style='color:#8a5210'>Hola</h1>" \
  -o imagen.png

¿Cuánto cuesta?

Cada imagen gasta 1 crédito de tu plan. Todas las herramientas de Cofferdock tiran del mismo bote de créditos, así que no tienes que contratar servicios sueltos para cada cosa.

Preguntas frecuentes

¿n8n tiene un nodo nativo de HTML a imagen? No. Se hace con el nodo HTTP Request llamando a la API de Cofferdock, que es la que genera la imagen.

¿Necesito saber programar? No. Solo rellenas los campos del nodo HTTP Request siguiendo esta guía. Los ejemplos de código son opcionales.

¿Qué recibo, un enlace o el archivo? El archivo de imagen directamente. Con Response Format: File, el siguiente nodo ya recibe la imagen lista para guardar o enviar.

¿Puedo generar imágenes en bucle? Sí. Si el nodo anterior devuelve varias filas, n8n ejecuta el HTTP Request una vez por cada una y obtienes una imagen por elemento.

Pruébalo tú mismo

Tienes las instrucciones completas, con ejemplos para copiar y pegar, en la página de la herramienta HTML a imagen. Y si aún no tienes cuenta, puedes crear una gratis y montar tu primer flujo hoy mismo.