Cómo poner texto en una imagen con Cloudflare Images

La forma más rápida de poner texto en una imagen

El punto de partida es un diseño que siempre se comporte igual. Este ejemplo crea una tarjeta de producto de 1200 por 630, toma el titular de ?text=, utiliza una fuente de marca fija y devuelve WebP. Sustituya las dos URL de recursos de example.com por URL bajo su control.

Agregue el binding de Images y active Workers Cache en la configuración de Wrangler:

{
  "images": {
    "binding": "IMAGES"
  },
  "cache": {
    "enabled": true
  }
}

Después, use el binding dentro del Worker:

const CARD_IMAGE = "https://assets.example.com/product-card.jpg";
const BRAND_FONT = "https://assets.example.com/fonts/Brand-Bold.woff2";

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const headline = (url.searchParams.get("text") || "AUTUMN DROP").trim();

    // This is a layout limit for this card, not Cloudflare's 1,000-character ceiling.
    if (!headline || [...headline].length > 120) {
      return new Response("Text must contain 1 to 120 characters", { status: 400 });
    }

    const source = await fetch(CARD_IMAGE);
    if (!source.ok || !source.body) {
      return new Response("Source image unavailable", { status: 502 });
    }

    const textLayer = env.IMAGES.text(headline, {
      font: { url: BRAND_FONT },
      size: 72,
      color: "#FFFFFF"
    });

    const result = await env.IMAGES
      .input(source.body)
      .transform({ width: 1200, height: 630, fit: "cover" })
      .draw(textLayer, { left: 72, bottom: 72 })
      .output({ format: "image/webp" });

    return result.response({
      headers: {
        "Cache-Control": "public, max-age=86400, stale-while-revalidate=604800"
      }
    });
  }
};

Al solicitar /card?text=Autumn%20Drop, el resultado es un WebP de 1200 por 630 con la frase indicada a 72 píxeles de los bordes izquierdo e inferior. Como la URL de la imagen incluye el texto variable, en este ejemplo cada leyenda obtiene naturalmente su propia URL. En producción conviene usar identificadores estables de campaña o producto siempre que sea posible. Permitir texto libre en la cadena de consulta de un endpoint público puede generar una cantidad ilimitada de variantes, con el consiguiente problema de costos y abuso.

Mantenga fijos los orígenes de la imagen y la fuente, o restrínjalos mediante una lista de permitidos. El ejemplo no permite que un visitante elija un destino de descarga arbitrario. Ese límite es importante siempre que un Worker público pueda recuperar recursos remotos.

Qué hace Cloudflare en realidad

Rasterizar texto significa convertir letras en píxeles. Puede imaginar .text() como una pequeña máquina de composición tipográfica que imprime una etiqueta transparente. .draw() coloca esa etiqueta sobre la fotografía y .output() sella ambas capas en el archivo final.

Ese modelo mental aclara el funcionamiento de la API. El texto no es un elemento HTML que flota sobre una imagen en el navegador: una vez renderizado, pasa a formar parte de los píxeles de la imagen.

La imagen base determina el tamaño final del lienzo. El texto se ubica con desplazamientos en píxeles mediante top, left, bottom o right. Si no se indica una posición, queda centrado. No se pueden definir a la vez left y right, ni top y bottom, sobre una misma capa. La opacidad va de 0 a 1 y el modo de composición predeterminado es over.

Es posible encadenar varias llamadas a .draw(). El orden de las llamadas define el orden de las capas, por lo que el último elemento dibujado queda encima. Cloudflare también incorporó una entrada text al array cf.image.draw para transformaciones basadas en URL, aunque el binding encaja mejor cuando la imagen base ya llega como bytes sin procesar desde R2, Cloudflare Images, el cuerpo de una solicitud u otra descarga.

Lo que falta es inteligencia de maquetación. Por ahora, Cloudflare documenta font, size y color para dar estilo al texto. No documenta cajas de texto, ajuste de línea, ajuste automático de tamaño, interlineado, espaciado entre caracteres, alineación, contorno, sombra ni fuentes alternativas. La aplicación debe decidir dónde cortar las líneas, cuáles son las zonas seguras y qué hacer cuando el nombre de un producto resulta demasiado largo.

Guarde en caché la tarjeta terminada, no solo la fuente

Las respuestas del binding de Images no se almacenan en caché de forma automática. Sin Workers Cache, cada solicitud repetida ejecuta el Worker y vuelve a decodificar y codificar la imagen original. Al activar la caché y definir Cache-Control, Cloudflare puede servir la respuesta ya terminada sin repetir ese trabajo.

La caché y la facturación de Images resuelven problemas distintos. Cloudflare cobra el binding por transformaciones únicas: cada combinación única de imagen original y parámetros cuenta una vez por mes calendario, y las repeticiones de esa transformación no aumentan el uso de Images durante el mismo mes. Los aciertos de caché siguen siendo importantes porque evitan nuevas ejecuciones del Worker y la latencia de volver a procesar la imagen.

Cloudflare no explica por separado cómo normaliza las cadenas de texto dentro del cálculo de unicidad. Para planificar sin sorpresas, conviene asumir que cada combinación distinta de imagen base, leyenda, estilo y salida constituye una transformación nueva hasta que los datos de uso propios demuestren lo contrario. Por eso, un catálogo con 2,000 productos y cinco tamaños de tarjeta puede comportarse como 10,000 variantes, aunque cada tarjeta se vea miles de veces.

Las cuentas cambian cuando el diseño ya pertenece al equipo

Cloudflare Images Free incluye 5,000 transformaciones únicas al mes. En el plan de pago, las primeras 5,000 siguen incluidas y las restantes cuestan $0.50 por cada 1,000. En el ejemplo de 10,000 transformaciones de la propia Cloudflare, el cargo mensual por transformaciones de Images es de $2.50.

Bannerbear publica actualmente su plan Automate a $49 al mes por 1,000 créditos de API y el plan Scale a $149 al mes por 10,000 créditos. Un renderizado de imagen normal consume un crédito, antes de aplicar multiplicadores por formatos adicionales, escala o capas de IA.

La diferencia de $146.50 no equivale a un ahorro listo para aprovechar. Bannerbear ofrece un producto de diseño listo para usar, con editor de plantillas, integraciones y flujo de trabajo en equipo. Cloudflare entrega primitivas de renderizado que hay que diseñar, programar, validar, supervisar y mantener. El almacenamiento del material original y el tiempo de ingeniería pueden sumarse al cargo por transformaciones de Images; almacenar dentro de Cloudflare Images tiene su propio precio.

La decisión, aun así, es bastante clara. Si el equipo ya controla las reglas de diseño y la solicitud de imagen se ejecuta en Cloudflare, una suscripción independiente de renderizado puede volverse opcional. Si el personal de marketing necesita mover capas visualmente cada semana, la suscripción paga el editor y el modelo operativo, no unos píxeles costosos.

Los siete flujos de trabajo que más se benefician, ordenados

1. Tarjetas comerciales para catálogos

Un comercio con cientos de SKU puede conservar un único diseño de fondo aprobado e insertar en cada tarjeta el nombre vigente del producto, el precio, una nota de existencias o una promoción. Los datos de inventario o de campaña activan el Worker, que devuelve el recurso final para un marketplace o una red social. El beneficio aparece cuando un cambio de precio deja de abrir una cola de exportaciones manuales y el mismo diseño aprobado puede regenerarse sin tocar la foto original.

El mejor escenario es el texto acotado. Un nombre de producto de dos líneas y una insignia de precio son predecibles; un párrafo promocional no lo es.

2. Tarjetas sociales para medios y CMS

Una publicación puede llamar a un solo endpoint cuando se publica un artículo y enviarle el titular o un ID de artículo estable. El Worker obtiene la imagen principal, renderiza el título y devuelve la tarjeta Open Graph o para redes sociales. El resultado: menos imágenes para compartir ausentes o desactualizadas, sin tener que esperar a un navegador de capturas dentro del proceso editorial.

Esta opción resulta especialmente atractiva cuando el CMS ya funciona detrás de Cloudflare. La imagen puede generarse en la misma capa perimetral que la sirve, y la URL final queda en caché para las veces que vuelva a compartirse.

3. Imágenes de estado para marketplaces

Un marketplace puede estampar NEW, RESERVED, SOLD, el estado del artículo o su ubicación en las tarjetas de los anuncios. El servicio de publicaciones cambia un pequeño valor de texto y el endpoint de imágenes produce un nuevo estado visual. Los vendedores no tienen que editar las fotos originales, mientras que los compradores ven el estado dentro de la imagen allí donde se inserte la tarjeta.

La rentabilidad comercial está en la exactitud. Una tarjeta con un estado desactualizado genera consultas de soporte y clics que terminan en decepción. Una capa superpuesta determinista puede cambiar junto con el registro.

4. Creatividades para franquicias y ofertas locales

Una franquicia de restaurantes o servicios puede mantener fija la composición de marca y variar la ciudad, oferta, fecha o precio según la ubicación. Una sola definición de campaña se convierte en muchas variantes locales. Así se reduce el trabajo de producción repetitivo y los elementos de riesgo —como la fuente, el color y la posición— quedan fuera del control del operador local.

Los nombres de lugares largos son la trampa. Antes de automatizar con seguridad, el flujo necesita anchos de texto medidos, tamaños alternativos o abreviaturas previamente aprobadas.

5. Tarjetas de eventos y horarios

Una plataforma de eventos puede colocar nombres de ponentes, horarios de sesiones, números de sala o un estado de última hora como CANCELLED sobre un cartel fijo. El programa de actividades original sigue siendo el registro de referencia y generar tarjetas se convierte en un paso de salida. La ventaja es poder reaccionar con rapidez cuando los detalles cambian cerca del evento, sin pedir a un diseñador que vuelva a abrir decenas de archivos.

6. Vistas resumidas de informes para clientes

Un producto de informes puede añadir un periodo, el nombre del cliente y una métrica principal a la imagen de un gráfico con la marca, destinada a correo electrónico o mensajería. El Worker toma como base el gráfico ya renderizado, incorpora las pocas etiquetas variables y devuelve un formato final compacto. Resulta útil cuando el destino no puede ejecutar el panel de control.

No conviene usar la capa de texto para dibujar un panel completo. Su mejor función es ser el último paso de rotulación determinista.

7. Etiquetas operativas internas

Un almacén, un equipo de servicio en campo o una cola de moderación puede imprimir texto breve de estado sobre las fotos de los artículos: inspección, lote, ruta o resultado de la revisión. La referencia visual sobrevive bien al paso por sistemas que eliminan los metadatos circundantes. El beneficio es reducir las consultas cuando alguien recibe la imagen fuera de contexto.

Es una comodidad operativa, no un sustituto del registro subyacente. Mantenga el estado en la base de datos y trate la imagen como una vista.

Tres productos que vale la pena crear

La mejor oportunidad: un endpoint vertical de tarjetas sociales

La propuesta es un servicio de tarjetas que proteja la marca para medios, agencias o negocios con varias sucursales que ya usan diseños fijos, pero no quieren operar una infraestructura de renderizado con navegador. El comprador aporta una imagen principal y campos de texto aprobados; el servicio devuelve URL estables para un conjunto reducido de relaciones de aspecto.

Los datos de palabras clave de Estados Unidos estiman 480 búsquedas mensuales para social media post maker, con un costo por clic de $19.95. La frase exacta abarca más que los compradores de una API, pero su CPC inusualmente alto demuestra que los proveedores compiten por este trabajo de producción. Los planes mensuales de Bannerbear de $49 y $149 sirven como referencia presupuestaria actual para equipos que ya pagan por renderizado automatizado.

La versión mínima que se puede vender consta de un Worker, tres diseños de tarjeta bloqueados, una vista previa de administración, un webhook para CMS, listas estrictas de orígenes permitidos, claves de caché estables y una cola de errores para el texto que no cabe. Lo que se vende es la fiabilidad de la conexión editorial, no la llamada a .text() por sí sola.

El escollo está en hacerse cargo de las plantillas. Cloudflare no ofrece al cliente un editor visual y cada diseño nuevo puede convertirse en trabajo de servicio. Aun así, esta es la oportunidad más sólida: la nueva primitiva elimina el renderizador de un flujo recurrente con valor comercial, mientras que la integración y el control de marca permanecen como producto.

Un motor de etiquetas promocionales para catálogos

La idea es crear un motor de composición basado en feeds para equipos de comercio electrónico, capaz de agregar precios, estados de oferta, promesas de entrega o nombres de colección a las imágenes de producto. Un CSV, un PIM o un webhook de comercio actualiza los datos; el servicio solo regenera las variantes que cambiaron.

Product label maker recibe unas 320 búsquedas mensuales en Estados Unidos, tiene intención comercial y un CPC de $6.03 con alta competencia entre anunciantes. Es una señal de demanda pagada en torno a la creación de etiquetas, aunque buena parte de las búsquedas corresponde a etiquetas imprimibles y no a gráficos para catálogos.

Un MVP necesita un conector para el feed de productos, unas cuantas insignias fijas, ajustes predeterminados de relación de aspecto, una vista previa y reglas para nombres largos y precios ausentes. El inconveniente es el alcance. Los envases físicos exigen resolución de impresión, sangrado, códigos de barras y revisión normativa, necesidades que esta capa rasterizada no resuelve por sí sola. Conviene limitarse a etiquetas promocionales para imágenes, salvo que esos sistemas formen parte del producto.

Una herramienta integrada para agregar texto a una imagen

La propuesta es crear un pequeño componente de edición para un producto que ya atiende a creadores, un marketplace o una comunidad: se elige una imagen, se escribe un texto breve, se selecciona una fuente y un color entre los aprobados, se coloca dentro de una zona segura y se exporta. Cloudflare se ocupa de la rasterización final detrás de la interfaz del propio producto.

Add text to image recibe unas 6,600 búsquedas mensuales en Estados Unidos. La consulta más transaccional add text to image app registra unas 320 búsquedas y ha crecido un 23 por ciento interanual en el mismo conjunto de datos. La demanda existe, pero buena parte del público espera un editor generalista gratuito.

El MVP consiste en una vista previa limitada, entre cuatro y seis estilos de texto predefinidos, un endpoint de exportación y almacenamiento para la URL final. El inconveniente es la escasa diferenciación. Una herramienta genérica independiente compite con editores gratuitos consolidados. Tiene más sentido como función de pago dentro de un producto que ya controla la imagen, el usuario y el destino de publicación.

Cuándo Cloudflare Images no es la herramienta adecuada

Cloudflare Images puede renderizar y componer texto. No decide qué debe decir, no vuelve adaptable la tipografía, no aprueba un diseño de marca ni ofrece un editor de plantillas para personal de marketing. Si esas son las partes difíciles, un producto completo de automatización de diseño todavía puede costar menos que desarrollarlas y mantenerlas internamente. Para analizar un cambio de sistema de marca completo, consulte la prueba de renovación de marca con Canva AI 2.0.

Hay cinco señales prácticas para detenerse:

• El texto necesita un ajuste de línea sofisticado, ajuste automático de tamaño, texto enriquecido o composición específica para una escritura que aún no se ha probado con la fuente elegida.
• Los editores necesitan mover capas visualmente y publicar plantillas nuevas sin intervención de desarrollo.
• Un endpoint público aceptaría URL arbitrarias de imágenes o fuentes sin una lista de permitidos.
• No es posible limitar la creación de variantes, por lo que cadenas de consulta aleatorias podrían consumir la asignación Free de 5,000 transformaciones y hacer que las solicitudes nuevas fallen con el error 9422.
• La prueba local depende del renderizado de texto. La implementación local de Images de baja fidelidad solo admite ancho, alto, rotación y formato; para esta función, use npx wrangler dev --remote.

Los límites de fuente y texto son restricciones firmes: una fuente personalizada no puede superar los 20 MB, el contenido renderizado no puede exceder los 1,000 caracteres y su capa rasterizada no puede medir más de 4096 por 4096 píxeles. Son límites amplios para etiquetas y titulares, pero no convierten una API de imágenes en un motor de maquetación de páginas.

Si necesita un endpoint de imágenes fiable para su propio catálogo o sistema editorial, el mejor punto de partida son los sistemas de producción con IA.