html2img — HTML a imagen
html2img es una API que convierte un diseño en HTML en una imagen (PNG o JPEG). Le mandas tu diseño y te devuelve la imagen, lista para guardar, enviar o publicar. Perfecta para generar imágenes automáticamente (posts para redes, miniaturas, Open Graph, recibos o certificados) desde n8n, Make o Zapier, sin montar servidores.
Pruébalo en 10 segundos
Cambia los textos y pulsa Generar: esto es justo lo que tu automatización recibiría como imagen. Sin tarjeta y sin programar.
Plantillas listas para usar
¿No quieres hacer el diseño desde cero? Tenemos una galería de plantillas (tarjetas para redes, facturas, certificados, miniaturas…) que copias con un clic y pegas directamente en tu flujo. La vamos ampliando.
Cómo funciona
Esta herramienta convierte un diseño en HTML (texto con el aspecto que quieres) en una imagen (PNG o JPEG). Tú le mandas el diseño y te devuelve la imagen, lista para guardar, enviar por email o publicar en redes.
Está pensada para usarla desde plataformas no-code como n8n, Make o Zapier, sin programar. Ideal para crear imágenes automáticamente: posts para redes, miniaturas, recibos, certificados, etc.
Lo único que necesitas
- Tu API key (tu “contraseña” para la herramienta). La creas en tu panel con “+ Crear llave”. Se muestra una sola vez, así que cópiala y guárdala.
- En tu plataforma de automatización, un paso de tipo “HTTP Request” / “Hacer una petición HTTP” (lo tienen n8n, Make, Zapier, Pipedream…).
Cómo usarlo en n8n (paso a paso)
Le envías tu HTML tal cual y te devuelve la imagen directamente, lista para usar. Sin pasos de conversión. En el nodo HTTP Request:
- Method:
POST - URL:
https://api.cofferdock.com/capture - Send Query Parameters: actívalo y añade el tamaño en campos separados (cómodo, sin tocar el enlace):
width=1200,height=630. (Puedes añadir más:format,full_page… ver la tabla de abajo.) - Send Headers: actívalo y añade dos:
x-api-key= tu llave, yContent-Type=text/html - Send Body: actívalo → Body Content Type: Raw → en Body pega tu HTML (o conéctalo desde un paso anterior)
- En Options → Response → Response Format: elige File
La salida del nodo ya es la imagen como archivo: conéctala directamente a Drive, email, Telegram, redes… Un solo nodo y listo.
En Make (módulo HTTP → Make a request): mismo método y URL, en Query String añade width y height, en Headers las dos cabeceras, Body type: Raw, Content type: text/html y pega tu HTML en Request content. La respuesta ya es el archivo de imagen.
En resumen: POST a …/capture, width y height como Query Parameters, las cabeceras x-api-key y Content-Type: text/html, el HTML en Body en modo Raw y Response Format en File.
Opciones (en Query Parameters)
Opciones que puedes añadir como Query Parameters (campos name/value en n8n/Make):
| Opción | Por defecto | Para qué sirve |
|---|---|---|
width | 1200 | Ancho de la imagen en píxeles. |
height | 630 | Alto de la imagen en píxeles. |
format | png | Formato: png o jpeg. |
full_page | false | Si tu diseño es más largo que el alto, ponlo en true para capturarlo entero. |
wait_ms | 0 | Esperar unos milisegundos antes de la foto (por si algo tarda en cargar). Máx. 5000. |
Imágenes y fuentes de internet: puedes usar fotos de fondo, logos o tipografías alojadas en internet poniendo su enlace (https://…) dentro del HTML/CSS, y se cargarán en la imagen final. El diseño se renderiza sin ejecutar JavaScript, así que usa HTML y CSS (no scripts).
Resumen de la API
- Endpoint:
POST https://api.cofferdock.com/capture - Auth: cabecera
x-api-key: TU_LLAVE. - Entrada: el HTML va en el cuerpo como
text/html(a pelo) o comoapplication/jsonen el campohtml. - Salida: por defecto, con
text/htmldevuelve el binario de la imagen (image/pngoimage/jpeg); con JSON devuelve base64. Añadeoutput=imagepara forzar el binario en cualquier caso. - Opciones: en Query Parameters o en el JSON (si coinciden, gana el JSON).
- Límites: HTML máx. 5 MB; timeout 30 s; JavaScript desactivado (solo HTML/CSS); 30 capturas/min por IP.
Opciones
| Opción | Por defecto | Descripción |
|---|---|---|
width | 1200 | Ancho en px (100–3840). |
height | 630 | Alto en px (100–2160). |
format | png | png o jpeg. |
quality | 90 | Calidad JPEG (1–100). Solo aplica a jpeg. |
full_page | false | Captura toda la altura del contenido. |
wait_ms | 0 | Espera antes de capturar, en ms (máx. 5000). |
output | según modo | image (binario) o json (base64). |
Ejemplos
curl (HTML a pelo, guarda la imagen en un fichero):
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
JavaScript (Node 18+):
const r = await fetch('https://api.cofferdock.com/capture?width=1200&height=630', {
method: 'POST',
headers: { 'x-api-key': 'TU_LLAVE', 'Content-Type': 'text/html' },
body: '<h1>Hola</h1>',
});
const buffer = Buffer.from(await r.arrayBuffer());
require('fs').writeFileSync('imagen.png', buffer);
Python:
import requests
r = requests.post(
'https://api.cofferdock.com/capture',
params={'width': 1200, 'height': 630},
headers={'x-api-key': 'TU_LLAVE', 'Content-Type': 'text/html'},
data='<h1>Hola</h1>'.encode('utf-8'),
)
open('imagen.png', 'wb').write(r.content)
Modo JSON (respuesta en base64)
Con Content-Type: application/json, el HTML va en html y las opciones en el mismo objeto. La respuesta trae la imagen en base64:
{ "html": "<h1>Hola</h1>", "width": 1200, "height": 630 }
→ { "success": true, "image": "iVBORw0KGgo…", "mime_type": "image/png",
"meta": { "used": 12, "remaining": 488, "size_bytes": 8421 } }
Añade "output": "image" al JSON para recibir el binario en lugar del base64.
Lo que recibes
La imagen directamente (un archivo PNG o JPEG), lista para guardar, enviar por email o publicar. No hay que convertir nada: el paso siguiente de tu automatización ya recibe el archivo. (En el modo técnico con JSON, la imagen llega en base64.)
Si en un pico recibes “ocupado”
En momentos de mucha demanda, la API puede responder “ocupado” (código 503) y pedirte que esperes unos segundos. Es raro y puntual, pero para que tu automatización lo resuelva sola, activa el reintento en el paso de la petición:
- En n8n: en el nodo HTTP Request, pestaña Settings, activa “Retry On Fail”. Con 2–3 intentos sobra.
- En Make: añade un manejador de errores al módulo (clic derecho → Add error handler) con la directiva Break, que reintenta automáticamente.
Nuestra respuesta incluye la cabecera Retry-After con los segundos que conviene esperar. Con el reintento activado, tu flujo ni se entera.
html2img — HTML to image
html2img is an API that turns an HTML design into an image (PNG or JPEG). You send your design and get the image back, ready to save, send or publish. Great for generating images automatically (social posts, thumbnails, Open Graph, receipts or certificates) from n8n, Make or Zapier, with no servers to maintain.
Try it in 10 seconds
Change the text and hit Generate: this is exactly what your automation would receive as an image. No card, no coding.
Ready-to-use templates
Don't want to design from scratch? We have a gallery of templates (social cards, invoices, certificates, thumbnails…) you can copy with one click and paste straight into your flow. We keep adding more.
How it works
This tool turns an HTML design (text describing how it should look) into an image (PNG or JPEG). You send the design and it returns the image, ready to save, email or post on social media.
It's made to be used from no-code platforms like n8n, Make or Zapier, without coding. Great for generating images automatically: social posts, thumbnails, receipts, certificates, etc.
All you need
- Your API key (your “password” for the tool). Create it in your dashboard with “+ Create key”. It's shown only once, so copy and save it.
- In your automation platform, an “HTTP Request” step (n8n, Make, Zapier, Pipedream… all have one).
How to use it in n8n (step by step)
You send your HTML as is and you get the image back directly, ready to use. No conversion steps. In the HTTP Request node:
- Method:
POST - URL:
https://api.cofferdock.com/capture - Send Query Parameters: on, and add the size as separate fields (handy, no editing the URL):
width=1200,height=630. (You can add more:format,full_page… see the table below.) - Send Headers: on → add two:
x-api-key= your key, andContent-Type=text/html - Send Body: on → Body Content Type: Raw → paste your HTML in Body (or connect it from a previous step)
- Under Options → Response → Response Format: choose File
The node's output is already the image as a file: connect it straight to Drive, email, Telegram, social… One node and done.
In Make (HTTP → Make a request module): same method and URL, in Query String add width and height, in Headers the two headers, Body type: Raw, Content type: text/html, and paste your HTML into Request content. The response is already the image file.
In short: POST to …/capture, width and height as Query Parameters, the x-api-key and Content-Type: text/html headers, your HTML in Body as Raw, and Response Format as File.
Options (as Query Parameters)
Options you can add as Query Parameters (name/value fields in n8n/Make):
| Option | Default | What it does |
|---|---|---|
width | 1200 | Image width in pixels. |
height | 630 | Image height in pixels. |
format | png | Format: png or jpeg. |
full_page | false | If your design is taller than the height, set it to true to capture all of it. |
wait_ms | 0 | Wait a few milliseconds before the snapshot (in case something is still loading). Max 5000. |
Internet images and fonts: you can use background photos, logos or fonts hosted online by putting their link (https://…) inside the HTML/CSS, and they'll load into the final image. The design is rendered without running JavaScript, so use HTML and CSS (no scripts).
API overview
- Endpoint:
POST https://api.cofferdock.com/capture - Auth: header
x-api-key: YOUR_KEY. - Input: the HTML goes in the body as
text/html(raw) or asapplication/jsonin thehtmlfield. - Output: by default, with
text/htmlit returns the image binary (image/pngorimage/jpeg); with JSON it returns base64. Addoutput=imageto force the binary either way. - Options: via Query Parameters or in the JSON (JSON wins if both are set).
- Limits: HTML max 5 MB; 30 s timeout; JavaScript disabled (HTML/CSS only); 30 captures/min per IP.
Options
| Option | Default | Description |
|---|---|---|
width | 1200 | Width in px (100–3840). |
height | 630 | Height in px (100–2160). |
format | png | png or jpeg. |
quality | 90 | JPEG quality (1–100). Applies to jpeg only. |
full_page | false | Capture the full content height. |
wait_ms | 0 | Wait before capturing, in ms (max 5000). |
output | per mode | image (binary) or json (base64). |
Examples
curl (raw HTML, saves the image to a file):
curl -X POST "https://api.cofferdock.com/capture?width=1200&height=630" \
-H "x-api-key: YOUR_KEY" \
-H "Content-Type: text/html" \
--data-binary "<h1 style='color:#8a5210'>Hello</h1>" \
-o image.png
JavaScript (Node 18+):
const r = await fetch('https://api.cofferdock.com/capture?width=1200&height=630', {
method: 'POST',
headers: { 'x-api-key': 'YOUR_KEY', 'Content-Type': 'text/html' },
body: '<h1>Hello</h1>',
});
const buffer = Buffer.from(await r.arrayBuffer());
require('fs').writeFileSync('image.png', buffer);
Python:
import requests
r = requests.post(
'https://api.cofferdock.com/capture',
params={'width': 1200, 'height': 630},
headers={'x-api-key': 'YOUR_KEY', 'Content-Type': 'text/html'},
data='<h1>Hello</h1>'.encode('utf-8'),
)
open('image.png', 'wb').write(r.content)
JSON mode (base64 response)
With Content-Type: application/json, the HTML goes in html and the options in the same object. The response carries the image in base64:
{ "html": "<h1>Hello</h1>", "width": 1200, "height": 630 }
→ { "success": true, "image": "iVBORw0KGgo…", "mime_type": "image/png",
"meta": { "used": 12, "remaining": 488, "size_bytes": 8421 } }
Add "output": "image" to the JSON to receive the binary instead of base64.
What you get back
The image itself (a PNG or JPEG file), ready to save, email or publish. Nothing to convert: the next step of your automation already receives the file. (In technical mode with JSON, the image comes in base64.)
If you get “busy” during a spike
At peak times, the API may reply “busy” (status 503) and ask you to wait a few seconds. It's rare and brief, but to let your automation handle it on its own, turn on retry on the request step:
- In n8n: on the HTTP Request node, Settings tab, turn on “Retry On Fail”. 2–3 attempts is plenty.
- In Make: add an error handler to the module (right-click → Add error handler) with the Break directive, which retries automatically.
Our response includes a Retry-After header telling how many seconds to wait. With retry on, your flow won't even notice.