Динамическое создание изображений онлайн

Placeholders.ru

Изображения-заглушки на лету

Placeholders.ru - создание плэйсхолдеров онлайн

Наш сайт позволяет динамически сформировать картинку-заполнитель (плэйсхолдер) по заданным параметрам. Что такое плэйсхолдер?

Сервис может генерировать прямоугольную картинку:

  1. Заданных размеров (ширина и высота)
  2. Заданного формата (png, jpg,gif)
  3. Заданного цвета фона
  4. С прозрачным фоном
  5. Заданного цвета текста
  6. Задать текст надписи
  7. С бордюром (рамкой)
  8. Задать цвет бордюра
  9. С перекрестьем (двумя диагоналями)

Создать плэйсхолдер можно любым из двух способов.

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

http://www.placeholders.ru/ФОН/ЦВЕТТЕКСТА/РАМКА/ПЕРЕКРЕСТЬЕ/ШИРИНАxВЫСОТА.ФОРМАТ

В приведённой ссылке ФОН, ЦВЕТТЕКСТА, РАМКА, ПЕРЕКРЕСТЬЕ, ШИРИНА, ВЫСОТА и ФОРМАТ это просто имена параметров, вместо которых должны быть подставлены необходимые вам значения. Каждый параметр может быть указан только в определённом формате (рассмотрим ниже).

Пример ссылки:

http://www.placeholders.ru/placeholder/2233d0/efefef/noborder/cross/350x200.png

Пример плэйсхолдера

Как можно догадаться сразу, будет создан плэйсхолдер формата PNG, размерами 350 на 200 пикселов, с фоном #D0D0D0, цветом текста #333333, без рамки, но с перекрестьем и надписью 350x200.

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

Не все параметры являются обязательными, часть из них можно опустить. Обязательные параметры: ФОН, ШИРИНА, ВЫСОТА и ФОРМАТ, их необходимо задавать в любом случае. Рассмотрим теперь формат каждого параметра ссылки по-отдельности.

ФОН – задаёт цвет фона в привычном шестнадцатеричном формате. Параметр обязательный. Значение задаётся в виде шести шестнадцатеричных знаков (от 0 до 9 и от a до f) без предшествующего знака # . Примеры цвета фона: a8be5a, 323232, ceb6d6 и т.д. В качестве исключения можно использовать сокращённый синтаксис задания цвета – три шестнадцатеричных знака. Например, сокращённо a6d будет означать тот же самый цвет фона плэйсхолдера, что и aa66dd. Не забывайте, что в значениях параметров допустимы лишь символы нижнего регистра. В качестве параметра фона также можно использовать значение transparent, что даёт возможность создавать прозрачное изображение плэйсхолдера. Прозрачный фон применим только к форматам png и gif, если вы попытаетесь создать прозрачную картинку jpg, то она получится с фоном (цвет фона по умолчанию 444444).

ЦВЕТТЕКСТА - цвет выводимого на изображении-заглушке текста. Значения параметра сходны с предыдущим параметром ФОН , за исключением того, что для цвета текста не применима константа transparent. В остальном также можно использовать как значения цвета из шести шестнадцатеричных знаков, так и сокращённый формат из трёх шестнадцатеричных знаков. Если параметр ЦВЕТТЕКСТА не задан, будет использоваться значение цвета текста по умолчанию (dddddd).

РАМКА – указывает, будет ли создаваемый плэйсхолдер обрамляться рамкой. Возможных значения всего два: border и noborder, означающие наличие рамки или её отсутствие соответственно. Если значение параметра не задано, будет использоваться значение noborder (рамки не будет).

ПЕРЕКРЕСТЬЕ – позволяет создать графический плэйсхолдер с характерным крестом по диагонали. Допустимых значений всего два: cross или nocross , означающих соответственно наличие или отсутствие перекрестья. Если параметр не задан, перекрестье не выводится.

ШИРИНА – задаёт ширину плэйсхолдера в пикселах. Параметр обязательный, принимаемые значения – целые числа, максимальное значение 1024.

ВЫСОТА – параметр аналогичен предыдущему и задаёт высоту плэйсхолдера. Параметр также обязательный, максимальное значение 1024.

ФОРМАТ – задаёт формат изображения, параметр обязательный. Возможных значений три: png, jpg и gif.

Дополнительные вопросы по формированию ссылок для создания плэйсхолдеров вынесены в FAQ.

Примеры ссылок:

http://www.placeholders.ru/placeholder/249942/468x60.gif

Пример плэйсхолдера 1

http://www.placeholders.ru/placeholder/b0b0ee/333/border/nocross/350x200.png

Пример плэйсхолдера 2

http://www.placeholders.ru/placeholder/242aa2/ffffff/noborder/160x600.jpg

Пример плэйсхолдера 3

http://www.placeholders.ru/placeholder/222/nocross/350x200.gif

Пример плэйсхолдера 4

http://www.placeholders.ru/placeholder/transparent/acacac/border/cross/350x200.png

Пример плэйсхолдера 5

http://www.placeholders.ru/placeholder/e22/99e/noborder/nocross/200x200.gif

Пример плэйсхолдера 6

http://www.placeholders.ru/placeholder/4ee/border/350x200.png

Пример плэйсхолдера 7

В подавляющем большинстве ситуаций возможностей формирования картинки-заполнителя с помощью ссылки более, чем достаточно. Если вам требуются дополнительные возможности вроде указания другого цвета рамки, создания плэйсхолдера с прозрачным фоном или особого текста, следует воспользоваться для этого специальным мастером. Мастер создания плэйсхолдера будет открыт в отдельном окне или вкладке (в зависимости от настроек браузера), после формирования изображения-заглушки дополнительное окно(вкладку) можно закрыть.