Social-graphcis-library

Невероятно, как быстро летит время. Прошло уже 2 года с тех пор, как я начал проект Social-graphics-library. Но что такое SGL на самом деле? Social-graphics-library — это NPM проект, который предназначен для динамической генерации графики социальных медиа,
на основе шаблонов.

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

В настоящее время проект доступен в версии:

Загрузки:

https://github.com/Social-graphics-library/Social-graphics-library

https://www.npmjs.com/package/social-graphics-library

Установка

Для последней стабильной версии:

npm i social-graphics-library
Войдите в полноэкранный режим Выйти из полноэкранного режима

Введение

Библиотека социальной графики использует <canvas>
для создания графики SVG, PNG, JPEG и WebP для членов команды сообщества и игроков.

Поддержка

Существует также поддержка через Discord-сервер поддержки программного обеспечения.

Структура

Статическая функция generator используется для генерации графики
вызываемая классом SGL:

new SGL.generator(
    teamName,
    playerName,
    mode,
    containerId,
    imgMode
  );
Вход в полноэкранный режим Выход из полноэкранного режима

В качестве альтернативы, если необходимо сгенерировать несколько графических изображений, можно вызвать метод multiGenerator:

new SGL.multiGenerator(tName, pName, [{
          mode: 'twitch-title',
          containerId: 'img-container-1',
          imgMode: 'jpeg'
      }, {
          mode: 'elavate-title',
          containerId: 'img-container-2',
          imgMode: 'jpeg',
          generateLink: true
      }]
Войти в полноэкранный режим Выйти из полноэкранного режима

Модификаторы

  • Имя команды:
    • Название команды
  • Имя игрока:
    • Имя игрока
  • Режим:
    • Режим генерируемого изображения
    • youtube-title
      • Генерирует изображение обложки Youtube
    • twitch-title
      • Генерирует фотографию обложки Twitch
    • twitter-title
      • Создает фотографию обложки Twitter
    • elavate-title
      • Создает фотографию обложки Youtube
    • игровой
      • Генерирует логотип игры
  • ID контейнера:
    • Указывает ID контейнера, для которого используется сгенерированное изображение.
  • Режим изображения:
    • Режим генерируемого изображения
    • png
    • svg
    • jpeg
    • webp
  • Генерировать ссылку
    • Этот альтернативный режим обеспечивает автоматическое создание ссылки для скачивания
    • true
    • false

Только dataURL

Можно сгенерировать только dataURL нужного изображения и вернуть его.
Для этого на классеSGL вызывается метод getImageDataUrl. Он возвращает соответствующий DataURL в виде обещания.
Пример вызова:

await new SGL.getImageDataUrl (
  document.getElementById ('M. Mustermann'). value,
  document.getElementById ('Mustercorp'). value,
  'logo',
  'webp'
));
Вход в полноэкранный режим Выход из полноэкранного режима

Инжектировать шаблон (экспериментальная функция)

Можно внедрять свои собственные шаблоны локально в качестве альтернативы форку проекта. Для этого просто установите пакет NPM с помощью npm i social-graphics-library, затем шаблон может быть внедрен после инициализации с помощью следующего метода:

new SGL.inject([
  {
    "callName": "template_name",
    "template": new Template()
  }
])
Войти в полноэкранный режим Выйти из полноэкранного режима

Проверка шаблона

Для предотвращения возможных ошибок можно проверить шаблон, который уже был внедрен, и шаблон, который еще не был внедрен.
Для этого существует метод checkTemplate. Он возвращает bool или объект ответа.

Примерный вызов:

SGL.checkTemplate("basic", "example_template")
// Returns true or false
SGL.checkTemplate("advanced", "example_template", new Example_Template())
// Returns true or false
SGL.checkTemplate("all")
// Returns either true or a response object
Войти в полноэкранный режим Выйти из полноэкранного режима

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

  • основной
  • Проверяет, существует ли уже введенный шаблон и является ли он действительным.
  • Возвращает значение bool.
  • расширенный
  • Проверяет, существует ли и действителен ли переданный в этой точке шаблон.
  • Возвращает bool.
  • all
  • Проверяет все уже внедренные шаблоны.
  • Возвращает либо true, либо объект ответа.

При отсутствии параметров по умолчанию возвращается false.

Запрос всех внедренных шаблонов

Можно запросить все инжектированные шаблоны. Для этого существует метод ‘getInjectedTemplates’. Возвращаемый объект содержит массив объектов, содержащих имена и классы внедренных шаблонов.

SGL.getInjectedTemplates()
// Returns an array of objects
// Example:
// [
// {
// "callName": "example_template",
// "template":{}
// },
// {
// "callName": "example_template2",
// "template":{}
// }
//]
Вход в полноэкранный режим Выход из полноэкранного режима

Шаблоны

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

Простой шаблон имеет следующую структуру:

export class Example_Template {
  static readonly width: number = 1000;
  static readonly height: number = 1000;
  static template(teamName: string, playerName: string): string {
    teamName;
    playerName;
    return 'svg string';
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Класс всегда(!) имеет поле для ширины, одно для высоты и метод, который возвращает SVG-строку.
Для создания и настройки различные шаблоны для основных платформ социальных сетей доступны в папке assetes в формате .afpub. Их можно открывать и редактировать с помощью программ из семейства Affinity от Serif. В качестве альтернативы, сгенерированные из них файлы находятся в каталоге svg.

Внимание

При создании SVG-файла убедитесь, что динамические части хранятся как ТЕКСТ, а не как вектор.
После того как SVG готов, его можно сохранить в директории svg, а исходный код SVG подать в виде строки в метод template(). Таким образом, соответствующие тестовые места заменяются переменными, которые передаются в метод.

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

После этого просто компилируем, включаем, и все готово.


Генератор шаблонов

Генератор шаблонов SGL — это инструмент на базе Electron для генерации классов шаблонов JavaScript/TypeScript для Social Graphics Library из SVG-файлов. Документацию по инструменту можно найти в соответствующем репозитории, а также ссылки на скачивание текущей версии.


Предварительный просмотр

Оцените статью
devanswers.ru
Добавить комментарий