Как наложить текст на изображение в Cloudflare Images

Как наложить текст на изображение: минимальный рабочий пайплайн

Возьмите один воспроизводимый макет. В этом примере создаётся карточка товара размером 1200 на 630, заголовок берётся из ?text=, используется фиксированный фирменный шрифт, а результат возвращается в WebP. Замените оба URL ресурсов на example.com адресами, которыми управляете сами.

Добавьте привязку Images и включите Workers Cache в конфигурации Wrangler:

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

Затем используйте привязку в 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"
      }
    });
  }
};

При запросе /card?text=Autumn%20Drop на выходе получится WebP размером 1200 на 630: переданная фраза будет расположена в 72 пикселях от левого и нижнего краёв. Меняющийся текст входит в URL изображения, поэтому в этом примере у каждой подписи естественным образом появляется собственный адрес. В рабочей среде по возможности используйте стабильные идентификаторы кампаний или товаров. Произвольный текст в публичной строке запроса позволяет создать неограниченное число вариантов — это одновременно вопрос расходов и защиты от злоупотреблений.

Закрепите источники изображения и шрифта либо разрешайте их только по белому списку. Пример не даёт посетителю выбрать произвольный адрес для загрузки. Такая граница необходима всякий раз, когда публичный Worker может получать удалённые ресурсы.

Что на самом деле делает Cloudflare

При растеризации текста буквы превращаются в пиксели. Удобно представить .text() как небольшой наборный автомат, печатающий прозрачную наклейку. .draw() кладёт эту наклейку на фотографию, а .output() запечатывает оба слоя в итоговый файл.

Эта модель объясняет устройство API. Текст — не HTML-элемент, который парит над изображением в браузере. После рендеринга он становится частью пикселей изображения.

Размер базового изображения задаёт размер итогового холста. Текст позиционируется пиксельными отступами top, left, bottom или right. Если позиция не задана, он размещается по центру. Для одного наложения нельзя одновременно указать left и right либо top и bottom. Прозрачность принимает значения от 0 до 1, а режим композиции по умолчанию — over.

Можно последовательно вызвать .draw() несколько раз. Порядок вызовов определяет порядок слоёв: результат последнего окажется сверху. Для преобразований по URL Cloudflare также добавила элемент text в массив cf.image.draw, однако привязка удобнее, когда базовое изображение уже приходит в виде необработанных байтов из R2, Cloudflare Images, тела запроса или другого вызова fetch.

Главное, чего здесь нет, — интеллектуальной вёрстки. Сейчас Cloudflare документирует для оформления текста параметры font, size и color. Текстовые блоки, перенос строк, автоматический подбор размера, межстрочный и межбуквенный интервалы, выравнивание, обводка, тень и запасной шрифт в документации не описаны. Приложение само должно определять разрывы строк, безопасные зоны и поведение для слишком длинного названия товара.

Кэшируйте готовую карточку, а не только исходник

Ответы привязки Images не кэшируются автоматически. Без Workers Cache повторный запрос снова запускает Worker, декодирует и кодирует исходное изображение. Если включить кэш и задать Cache-Control, Cloudflare сможет вернуть готовый ответ, не повторяя эту работу.

Кэширование и тарификация Images решают разные задачи. Cloudflare считает использование привязки по уникальным преобразованиям: каждая уникальная комбинация исходного изображения и параметров учитывается один раз за календарный месяц, а её повторы в том же месяце не увеличивают расход Images. Попадания в кэш всё равно важны — они избавляют от повторного запуска Worker и задержки на обработку изображения.

Cloudflare отдельно не объясняет, как текстовые строки нормализуются при подсчёте уникальности. Для планирования безопаснее считать каждую комбинацию базового изображения, подписи, стиля и выходного формата новым преобразованием, пока собственные данные об использовании не докажут обратное. Поэтому каталог из 2,000 товаров с пятью размерами карточек может вести себя как 10,000 вариантов, даже если каждую карточку просматривают тысячи раз.

Экономика меняется, если макет уже принадлежит вам

Бесплатный тариф Cloudflare Images включает 5,000 уникальных преобразований в месяц. На платном тарифе первые 5,000 по-прежнему включены, а остальные стоят $0.50 за 1,000. В собственном примере Cloudflare с 10,000 преобразований месячная плата за эту строку Images составляет $2.50.

Сейчас Bannerbear указывает для тарифа Automate цену $49 в месяц за 1,000 API-кредитов, а для Scale — $149 в месяц за 10,000 кредитов. Обычный рендеринг одного изображения расходует один кредит — ещё до множителей за дополнительные форматы, масштаб или ИИ-слои.

Разница в $146.50 — не экономия на готовом решении. Bannerbear продаёт полноценный дизайн-продукт с редактором шаблонов, интеграциями и командным процессом. Cloudflare даёт примитивы рендеринга, которые придётся самостоятельно проектировать, программировать, проверять, отслеживать и поддерживать. К стоимости преобразований Images могут добавиться хранение исходников и время разработчиков; у хранения внутри Cloudflare Images есть отдельная цена.

И всё же выбор вполне однозначен. Если команда уже владеет правилами дизайна, а запрос на изображение обрабатывается в Cloudflare, отдельная подписка на рендеринг может оказаться необязательной. Если маркетологам нужно каждую неделю визуально передвигать слои, подписка оплачивает редактор и рабочий процесс, а не дорогие пиксели.

Семь сценариев, где решение особенно полезно

1. Карточки товаров для каталога

Ритейлер с сотнями SKU может сохранить один утверждённый фоновый макет и добавлять на каждую карточку актуальные название товара, цену, отметку о наличии или акцию. Данные о запасах или кампании запускают Worker, который возвращает готовый материал для маркетплейса или соцсетей. Выгода в том, что изменение цены больше не создаёт очередь на ручной экспорт, а утверждённый макет можно пересобрать, не трогая исходную фотографию.

Лучше всего подходит текст с жёсткими рамками. Название товара в две строки и один ценник предсказуемы. Абзац рекламного текста — нет.

2. Карточки для соцсетей из издательской системы и CMS

При публикации статьи издание может вызвать один эндпоинт, передав заголовок или стабильный идентификатор материала. Worker получает главное изображение, рендерит заголовок и возвращает Open Graph-карточку или изображение для соцсетей. Результат — меньше отсутствующих и устаревших превью и никакого ожидания браузера для скриншотов в процессе публикации.

Сценарий особенно привлекателен, если CMS уже работает за Cloudflare. Изображение генерируется на том же уровне edge-инфраструктуры, с которого оно отдаётся, а готовый URL кэшируется для повторных публикаций.

3. Изображения со статусом для маркетплейса

Маркетплейс может ставить на карточки объявлений отметки NEW, RESERVED, SOLD, а также состояние или местоположение. Сервис объявлений меняет небольшое текстовое значение, а эндпоинт изображений создаёт новое визуальное состояние. Продавцам не приходится редактировать исходные фотографии, а покупатели видят статус прямо на изображении в любом месте, где встроена карточка.

Коммерческая выгода — в точности данных. Устаревший статус порождает обращения в поддержку и переходы, после которых покупатель остаётся разочарован. Детерминированное наложение меняется вместе с записью.

4. Креативы для франшиз и локальных предложений

Ресторанная или сервисная франшиза может сохранить фирменную композицию неизменной, подставляя для каждой точки город, предложение, дату или цену. Одно описание кампании превращается во множество локальных вариантов. Рутинной производственной работы становится меньше, а рискованные параметры — шрифт, цвет и расположение — остаются вне контроля местного оператора.

Ловушка — длинные географические названия. Для безопасной автоматизации процессу нужны измерение ширины текста, запасные размеры или заранее утверждённые сокращения.

5. Карточки мероприятий и расписаний

Платформа для мероприятий может выводить поверх фиксированного постера имена спикеров, время сессий, номера залов или срочную отметку CANCELLED. Источником истины остаётся расписание, а генерация карточки становится этапом вывода. Когда детали меняются непосредственно перед мероприятием, обновления выходят быстро и дизайнеру не приходится заново открывать десятки файлов.

6. Снимки клиентских отчётов

Сервис отчётности может добавить период, название клиента и главный показатель на фирменное изображение диаграммы для письма или мессенджера. Worker принимает уже отрисованную диаграмму как основу, добавляет несколько переменных подписей и возвращает компактный итоговый формат. Это полезно, когда целевая среда не способна запустить сам дашборд.

Не пытайтесь рисовать текстовым слоем целый дашборд. Лучше всего он работает как последний детерминированный этап нанесения подписей.

7. Внутренние операционные метки

Склад, выездная служба или очередь модерации могут наносить на фотографии объектов короткие статусы: результат проверки, партию, маршрут или решение ревьюера. Такой визуальный контекст не теряется при прохождении через системы, удаляющие сопроводительные метаданные. Сотруднику, получившему изображение без контекста, реже приходится искать дополнительные сведения.

Это удобство для операционной работы, а не замена исходной записи. Храните статус в базе данных, а изображение считайте лишь одним из его представлений.

Три продукта, которые стоит создать

Лучшая возможность: специализированный эндпоинт для карточек соцсетей

Создайте сервис фирменных карточек для издательств, агентств или компаний с множеством филиалов, у которых уже есть фиксированные макеты, но нет желания поддерживать стек браузерного рендеринга. Клиент передаёт главное изображение и текст для утверждённых полей, а сервис возвращает стабильные URL для небольшого набора соотношений сторон.

По данным по ключевым словам в США, social media post maker получает около 480 поисковых запросов в месяц при стоимости клика $19.95. Точная фраза охватывает более широкую аудиторию, чем покупатели API, однако необычно высокий CPC показывает, что поставщики конкурируют за эту производственную задачу. Тарифы Bannerbear за $49 и $149 в месяц дают актуальный ориентир бюджета для команд, которые уже платят за автоматизированный рендеринг.

Минимальная версия, которую можно продавать, — один Worker, три жёстко заданных макета карточек, предварительный просмотр для администратора, вебхук CMS, строгие списки разрешённых источников, стабильные ключи кэша и очередь ошибок для текста, не помещающегося в макет. Продавайте надёжность интеграции с публикацией, а не сам вызов .text().

Сложность — ответственность за шаблоны. Cloudflare не предоставляет клиенту визуальный редактор, и каждый новый макет может превратиться в отдельную услугу. И всё же это самая сильная возможность: новый примитив убирает рендерер из повторяющегося коммерчески ценного процесса, а ценность продукта по-прежнему создают интеграция и контроль бренда.

Движок промометок для каталога

Создайте для команд электронной коммерции компоновщик на основе товарного фида, который добавляет на изображения товаров цены, статусы распродажи, обещания по доставке или названия коллекций. Данные обновляются через CSV, PIM или вебхук торговой платформы; сервис заново генерирует только изменившиеся варианты.

Запрос Product label maker получает около 320 поисков в США в месяц, имеет коммерческий интент и CPC $6.03 при высокой конкуренции рекламодателей. Это подтверждает платный спрос на создание этикеток, хотя значительная часть запросов относится к печатным этикеткам, а не к каталожной графике.

Для MVP нужны коннектор товарного фида, несколько фиксированных бейджей, пресеты соотношений сторон, предварительный просмотр и правила для длинных названий и отсутствующих цен. Слабое место — границы продукта. Физическая упаковка требует печатного разрешения, вылетов под обрез, штрихкодов и проверки на соответствие требованиям, чего одно растровое наложение не решает. Оставайтесь в области промометок для изображений, если только эти системы не входят в сам продукт.

Встроенный инструмент для добавления текста

Создайте небольшой встраиваемый редактор для существующего сервиса для авторов, маркетплейса или сообщества: выбрать изображение, ввести короткий текст, указать один из утверждённых шрифтов и цветов, разместить надпись в безопасной зоне и экспортировать результат. Cloudflare выполнит финальную растеризацию за собственным интерфейсом продукта.

Запрос Add text to image получает около 6,600 поисков в США в месяц. Более транзакционный add text to image app собирает около 320 запросов и, согласно тому же набору данных, вырос на 23 процента год к году. Спрос есть, но значительная часть аудитории ожидает бесплатный универсальный редактор.

MVP — это ограниченный предварительный просмотр, от четырёх до шести текстовых пресетов, один эндпоинт экспорта и хранилище URL готовых файлов. Слабое место — невысокая защищённость от конкурентов. Отдельный универсальный инструмент будет соперничать со зрелыми бесплатными редакторами. Гораздо логичнее сделать его платной функцией продукта, который уже владеет изображением, пользователем и каналом публикации.

Когда этот инструмент не подходит

Cloudflare Images умеет рендерить и компоновать текст. Но он не решает, что именно написать, не делает типографику адаптивной, не утверждает фирменный макет и не даёт маркетологу редактор шаблонов. Если сложность задачи именно в этом, полноценный продукт для автоматизации дизайна всё ещё может обойтись дешевле самостоятельной поддержки. Более широкий разбор изменений всей бренд-системы — в тесте обновления бренда с Canva AI 2.0.

Вот пять практических стоп-сигналов:

• Тексту нужны сложные переносы, автоматический подбор размера, форматирование или корректное формирование знаков для конкретной письменности, которое ещё не проверено с выбранным шрифтом.
• Редакторам необходимо визуально передвигать слои и публиковать новые шаблоны без разработчика.
• Публичный эндпоинт принимает произвольные URL исходников или шрифтов без списка разрешённых адресов.
• Число вариантов нельзя ограничить, поэтому случайные строки запроса способны исчерпать бесплатный лимит в 5,000 преобразований и привести к ошибке 9422 для новых запросов.
• Локальный тест зависит от рендеринга текста. Упрощённая локальная реализация Images поддерживает только width, height, rotate и format, поэтому для этой функции используйте npx wrangler dev --remote.

Ограничения шрифта и текста жёсткие: пользовательский шрифт не может быть больше 20 MB, текст для рендеринга — длиннее 1,000 символов, а его растровый слой — больше 4096 на 4096 пикселей. Для подписей и заголовков этих пределов достаточно. Но они не означают, что API изображений можно превращать в движок страничной вёрстки.

Если нужен надёжный эндпоинт изображений для собственного каталога или издательской системы, начать стоит с ИИ-систем для production.