Ajouter du texte sur une image avec Cloudflare Images

Le pipeline le plus court pour ajouter du texte sur une image

Commençons par une mise en page reproductible. Cet exemple crée une carte produit de 1200 × 630, récupère le titre dans ?text=, applique une police de marque fixe et renvoie un fichier WebP. Remplacez les deux URL de ressources example.com par des URL que vous contrôlez.

Ajoutez le binding Images et activez Workers Cache dans la configuration Wrangler :

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

Utilisez ensuite le binding dans le 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"
      }
    });
  }
};

Appelez /card?text=Autumn%20Drop : vous obtenez un WebP de 1200 × 630 où le texte fourni se trouve à 72 pixels des bords gauche et inférieur. Comme le texte variable figure dans l’URL de l’image, chaque légende possède naturellement sa propre URL dans cet exemple. En production, préférez des identifiants stables de campagne ou de produit lorsque c’est possible. Autoriser du texte libre dans la chaîne de requête d’un endpoint public peut créer un nombre illimité de variantes, avec un double risque de coût et d’abus.

Conservez des origines fixes ou placez-les sur liste blanche, aussi bien pour l’image source que pour la police. Cet exemple ne permet pas à un visiteur de choisir arbitrairement l’URL à charger. Cette limite est indispensable dès lors qu’un Worker public peut récupérer des ressources distantes.

Texte sur image : ce que fait réellement Cloudflare

La rastérisation du texte transforme les lettres en pixels. Imaginez .text() comme une petite machine de composition qui imprime un autocollant transparent. .draw() applique cet autocollant sur la photo, puis .output() fusionne les deux dans le fichier final.

Cette représentation mentale éclaire le fonctionnement de l’API. Le texte n’est pas un élément HTML qui flotte au-dessus de l’image dans le navigateur : une fois rendu, il fait partie de ses pixels.

L’image de base détermine la taille du canevas final. Positionnez le texte avec des décalages en pixels top, left, bottom ou right. Sans position indiquée, il est centré. Un même calque ne peut pas combiner left et right, ni top et bottom. L’opacité va de 0 à 1, et le mode de composition par défaut est over.

Vous pouvez enchaîner plusieurs appels à .draw(). Leur ordre détermine celui des calques : le dernier calque dessiné apparaît au-dessus des autres. Cloudflare a également ajouté une entrée text au tableau cf.image.draw pour les transformations à partir d’une URL. Le binding reste toutefois mieux adapté lorsque l’image de base arrive déjà sous forme d’octets bruts depuis R2, Cloudflare Images, le corps d’une requête ou un autre appel fetch.

Ce qui manque surtout, c’est l’intelligence de mise en page. Pour le style du texte, Cloudflare documente actuellement font, size et color. Rien n’est prévu dans la documentation pour les blocs de texte, les retours à la ligne, l’ajustement automatique, l’interligne, l’approche, l’alignement, le contour, l’ombre ou les polices de repli. C’est donc à l’application de gérer les sauts de ligne, les zones de sécurité et les noms de produits trop longs.

Mettez en cache la carte finale, pas seulement la source

Les réponses du binding Images ne sont pas mises en cache automatiquement. Sans Workers Cache, chaque requête répétée relance le Worker, puis décode et encode de nouveau l’image source. L’activation du cache et l’envoi de Cache-Control permettent à Cloudflare de servir la réponse finale sans recommencer ce travail.

La mise en cache et la facturation d’Images répondent à deux problèmes différents. Cloudflare facture le binding selon le nombre de transformations uniques : une combinaison unique d’image source et de paramètres est comptée une seule fois par mois calendaire, et ses répétitions n’ajoutent aucune consommation Images pendant ce même mois. Les réponses depuis le cache restent utiles, car elles évitent de réexécuter le Worker et réduisent la latence liée au traitement de l’image.

Cloudflare ne précise pas séparément comment les chaînes de texte sont normalisées dans le calcul d’unicité. Pour planifier sans mauvaise surprise, considérez chaque combinaison distincte d’image de base, de légende, de style et de sortie comme une nouvelle transformation, jusqu’à ce que vos propres données d’usage démontrent le contraire. Un catalogue de 2,000 produits décliné en cinq formats de carte peut donc représenter 10,000 variantes, même si chaque carte est consultée des milliers de fois.

Le calcul économique change lorsque la mise en page vous appartient déjà

L’offre gratuite de Cloudflare Images comprend 5,000 transformations uniques par mois. Dans l’offre payante, les 5,000 premières restent incluses, puis le reste coûte $0.50 par tranche de 1,000. Dans son propre exemple à 10,000 transformations, Cloudflare chiffre la ligne « transformations Images » à $2.50 pour le mois.

Bannerbear affiche actuellement son offre Automate à $49 par mois pour 1,000 crédits API, et l’offre Scale à $149 par mois pour 10,000 crédits. Le rendu d’une image ordinaire consomme un crédit, avant tout coefficient appliqué aux formats supplémentaires, à la mise à l’échelle ou aux calques d’IA.

L’écart de $146.50 ne constitue pas une économie clé en main. Bannerbear vend un véritable produit de conception, avec un éditeur de modèles, des intégrations et un workflow d’équipe. Cloudflare fournit des primitives de rendu qu’il faut concevoir, coder, valider, superviser et maintenir. Le stockage des sources et le temps d’ingénierie peuvent s’ajouter au coût des transformations Images ; le stockage au sein de Cloudflare Images possède sa propre tarification.

Le choix reste néanmoins assez net. Si l’équipe maîtrise déjà ses règles graphiques et que les requêtes d’images transitent par Cloudflare, un abonnement de rendu séparé peut devenir facultatif. Si les équipes marketing doivent déplacer visuellement les calques chaque semaine, cet abonnement finance l’éditeur et son modèle opérationnel, pas des pixels coûteux.

Les sept workflows qui en tirent le plus parti, classés

1. Cartes de merchandising pour catalogue

Un distributeur qui gère des centaines de SKU peut conserver une mise en page de fond validée et y inscrire le nom, le prix, l’état du stock ou la promotion en cours pour chaque produit. Les données de stock ou de campagne déclenchent le Worker, qui renvoie le visuel final destiné à une marketplace ou aux réseaux sociaux. L’intérêt économique est simple : une modification de prix ne crée plus une file d’exports manuels, et la même composition approuvée peut être régénérée sans toucher à la photo source.

Ce workflow fonctionne surtout avec des textes aux limites bien définies. Un nom de produit sur deux lignes et un badge de prix restent prévisibles ; un paragraphe promotionnel ne l’est pas.

2. Cartes sociales pour éditeurs et CMS

Lorsqu’un article est publié, un média peut appeler un endpoint unique en lui transmettant le titre ou un identifiant d’article stable. Le Worker récupère l’image principale, affiche le titre et renvoie la carte Open Graph ou destinée aux réseaux sociaux. À la clé : moins d’images de partage manquantes ou obsolètes, et aucun navigateur de capture d’écran qui ralentit la chaîne de publication.

La solution est particulièrement intéressante lorsque le CMS fonctionne déjà derrière Cloudflare. L’image peut être générée sur la même couche edge qui la sert, puis son URL finale mise en cache pour les partages suivants.

3. Images de statut pour marketplaces

Une marketplace peut apposer NEW, RESERVED, SOLD, l’état ou le lieu directement sur les cartes d’annonce. Le service d’annonces modifie une courte valeur textuelle, et l’endpoint d’image produit le nouvel état visuel. Les vendeurs n’ont pas à retoucher leurs photos d’origine, tandis que les acheteurs voient le statut dans l’image, quel que soit l’endroit où la carte est intégrée.

Le bénéfice commercial tient à la fiabilité de l’information. Une carte au statut obsolète génère des demandes d’assistance et des clics déceptifs. Une superposition déterministe peut évoluer en même temps que l’enregistrement.

4. Créations pour franchises et offres locales

Une chaîne de restaurants ou de services peut figer la composition de marque tout en adaptant la ville, l’offre, la date ou le prix à chaque zone. Une définition de campagne unique produit alors de nombreuses variantes locales. Le travail de production répétitif diminue, tandis que les éléments sensibles — police, couleur et emplacement — restent hors de portée de l’opérateur local.

Les noms de lieux trop longs sont le piège principal. Avant toute automatisation fiable, le workflow doit mesurer la largeur des textes, prévoir des tailles de repli ou imposer des abréviations validées en amont.

5. Cartes d’événements et de programmes

Une plateforme événementielle peut afficher le nom des intervenants, les horaires des sessions, les numéros de salle ou un statut CANCELLED de dernière minute sur une affiche fixe. Le programme source reste la référence, tandis que la génération des cartes devient une simple étape de sortie. Lorsque des informations changent à l’approche de l’événement, la mise à jour est immédiate et ne nécessite pas qu’un designer rouvre des dizaines de fichiers.

6. Aperçus de rapports clients

Un outil de reporting peut ajouter une période, le nom du client et un indicateur clé à l’image d’un graphique aux couleurs de la marque, puis l’envoyer par e-mail ou messagerie. Le Worker part du graphique déjà rendu, ajoute les quelques libellés variables et renvoie un format final compact. C’est utile lorsque le canal de destination ne peut pas exécuter le dashboard lui-même.

N’utilisez pas le calque de texte pour dessiner un dashboard entier. Sa force réside dans cette ultime étape d’annotation déterministe.

7. Étiquettes opérationnelles internes

Dans un entrepôt, une équipe d’intervention ou une file de modération, il devient possible d’inscrire un statut court sur les photos d’un élément : état du contrôle, lot, tournée ou résultat de l’examen. Le visuel traverse ainsi sans difficulté les systèmes qui suppriment les métadonnées environnantes. L’intérêt : limiter les recherches lorsqu’une personne reçoit l’image hors contexte.

Il s’agit d’un confort opérationnel, pas d’un substitut à l’enregistrement source. Conservez le statut dans la base de données et traitez l’image comme une vue.

Trois produits qui méritent d’être développés

Meilleure opportunité : un endpoint spécialisé de cartes sociales

Créez un service de cartes respectueux de la marque pour les éditeurs, les agences ou les entreprises multisites qui disposent déjà de mises en page fixes, mais ne veulent pas exploiter une infrastructure de rendu par navigateur. Le client fournit une image principale et des champs de texte approuvés ; le service renvoie des URL stables pour quelques formats prédéfinis.

Aux États-Unis, les données de mots-clés estiment à 480 le nombre de recherches mensuelles pour social media post maker, avec un coût par clic de $19.95. Cette expression exacte couvre un public plus large que les seuls acheteurs d’API, mais son CPC particulièrement élevé révèle la concurrence entre fournisseurs sur ce besoin de production. Les offres mensuelles de Bannerbear à $49 et $149 fournissent un point de comparaison actuel pour les équipes qui paient déjà l’automatisation du rendu.

La version commercialisable la plus simple réunit un Worker, trois mises en page verrouillées, un aperçu d’administration, un webhook CMS, des listes blanches strictes pour les sources, des clés de cache stables et une file d’échecs pour les textes qui débordent. Vendez la fiabilité de l’intégration éditoriale, pas le simple appel à .text().

Le principal écueil concerne la gestion des modèles. Cloudflare ne fournit aucun éditeur visuel au client, et chaque nouvelle mise en page peut se transformer en prestation de service. Cette piste reste malgré tout la plus solide : la nouvelle primitive supprime le moteur de rendu d’un workflow récurrent à forte valeur commerciale, tout en laissant l’intégration et la gouvernance de marque au cœur du produit.

Un moteur d’étiquettes promotionnelles pour catalogue

Créez un moteur de composition piloté par flux pour les équipes e-commerce, capable d’ajouter prix, promotions, promesses de livraison ou noms de collection aux images produit. Un CSV, un PIM ou un webhook de la plateforme marchande actualise les données ; le service ne régénère que les variantes modifiées.

Product label maker attire environ 320 recherches par mois aux États-Unis, affiche une intention commerciale et un CPC de $6.03, avec une forte concurrence publicitaire. Ces chiffres confirment une demande payante autour de la création d’étiquettes, même si une bonne partie des recherches concerne des étiquettes à imprimer plutôt que des visuels de catalogue.

Un MVP doit proposer un connecteur de flux produits, quelques badges fixes, des formats prédéfinis, un aperçu et des règles pour les noms trop longs ou les prix manquants. Attention au périmètre : les emballages physiques imposent une résolution d’impression, des fonds perdus, des codes-barres et une validation réglementaire que cette seule superposition matricielle ne résout pas. Restez sur les étiquettes promotionnelles d’images, sauf si ces systèmes font déjà partie du produit.

Un outil intégré pour ajouter du texte

Intégrez un petit éditeur dans un produit existant destiné aux créateurs, aux marketplaces ou aux communautés : l’utilisateur choisit une image, saisit un texte court, sélectionne une police et une couleur parmi les options approuvées, place le texte dans une zone sûre, puis exporte le résultat. Cloudflare assure la rastérisation finale derrière l’interface du produit.

Add text to image totalise environ 6,600 recherches par mois aux États-Unis. Plus transactionnelle, la requête add text to image app en attire environ 320 et a progressé de 23 % sur un an dans le même jeu de données. La demande existe, mais elle émane en grande partie d’utilisateurs qui attendent un éditeur généraliste gratuit.

Le MVP comprend un aperçu contraint, quatre à six styles de texte prédéfinis, un endpoint d’export et le stockage de l’URL finale. Sa faiblesse est le peu de différenciation possible. Face à des éditeurs gratuits et matures, un outil générique autonome aura du mal à s’imposer. La fonction prend davantage de sens comme option payante d’un produit qui possède déjà l’image, l’utilisateur et le canal de publication.

Quand Cloudflare Images n’est pas le bon outil

Cloudflare Images sait rendre et composer du texte. En revanche, il ne décide pas du contenu, n’adapte pas automatiquement la typographie, ne valide pas une composition de marque et ne fournit pas d’éditeur de modèles destiné aux équipes marketing. Si ces tâches concentrent la difficulté, une plateforme complète d’automatisation graphique peut encore coûter moins cher que leur maintenance en interne. Pour une analyse plus large de la transformation d’un système de marque complet, consultez le test de refonte de marque avec Canva AI 2.0.

Voici cinq signaux d’arrêt concrets :

• Votre texte exige des retours à la ligne sophistiqués, un ajustement automatique, du texte enrichi ou une mise en forme propre à une écriture que vous n’avez pas testée avec la police choisie.
• Les éditeurs doivent déplacer les calques visuellement et publier de nouveaux modèles sans développeur.
• Un endpoint public accepterait des URL de source ou de police arbitraires sans liste blanche.
• Vous ne pouvez pas limiter la création de variantes : des chaînes de requête aléatoires pourraient épuiser les 5,000 transformations de l’offre Free et faire échouer les nouvelles requêtes avec l’erreur 9422.
• Votre test local dépend du rendu du texte. L’implémentation locale simplifiée d’Images ne prend en charge que la largeur, la hauteur, la rotation et le format ; utilisez donc npx wrangler dev --remote pour tester cette fonction.

Les limites de police et de texte sont strictes : une police personnalisée ne peut pas dépasser 20 MB, le contenu rendu est limité à 1,000 caractères et son calque matriciel à 4096 × 4096 pixels. Ces plafonds sont généreux pour des étiquettes et des titres, mais ils ne justifient pas de transformer l’API d’image en moteur de mise en page.

Pour concevoir un endpoint d’image fiable autour de votre catalogue ou de votre système de publication, le service Systèmes de production IA est le bon point de départ.