Кодинг
★ Рубрика: Кодинг

SVG и JavaScript для создания изображений

Здесь приведены примеры изображений, которые можно создавать с использованием JavaScript. Изображения генерируются автоматически с учетом указанных Вами параметров. Для создания изображений используется скрипт ImgPlaceholder.min.js. Изображение получается в формате svg. Но, если его выделить и скопировать, то можно вставить в любой графический редактор, а затем сохранить в нужном вам формате. Но, основное назначение таких изображений в другом: автоматическая генерация при загрузке страницы сайта с нужными вам параметрами и значениями. Важный момент - изображение легко интегрируется в адаптивные шаблоны.

Приведем примеры. Начнем с простейшего изображения по умолчанию. Если не указана метка (текст), то в качестве надписи выводятся текущие размеры. Отлично подходит для пустых рекламных баннеров или для заполнения шаблона сайта пустыми изображениями на стадии верстки и отладки.
< img data-imgplaceholder width='100%' height='70'/>
В результате будет выведен следующий баннер, с настройками по умолчанию. Вы можете настроить ширину и высоту изображения.
Следующий код демонстрирует настройку надписи, ширину границы, ее цвет, цвет текста и фона.
 < img data-imgplaceholder data-label="Ваша надпись" 
data-border-width="20" data-border-color="#b01e00" 
data-bgcolor="#f3b200" data-forecolor="#b01e00" width="100%" height="70" />
Результат выполнения приведен ниже:
Следующий пример кода:
< img data-imgplaceholder data-forecolor="#333" 
data-bgcolor="#00c13f" width="100%" height="70" />
И результат:
Следующий пример:
< img data-imgplaceholder data-border-color="#e34c26" 
data-label="HTML5, SVG and JavaScript" data-forecolor="#e34c26" 
data-bgcolor="#f6f6f6" width="100%" height="70" />
Результат: И последний пример настройки:
 < img data-imgplaceholder data-forecolor="#333" 
data-border-width="20" data-bgcolor="#00c13f" width="100%" height="70" />
Результат:

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]