Генерация шейринг-картинок на канвасе с помощь Fabric.js. Скачать / NPM.
Генерация и скачивание занимает примерно 200 мс.
При каждом запросе по ссылке генерируется и скачивается PNG-картинка (метод download(canvas))
Написано скриптом, встроенным в HTML-файл main.html. В ассетах лого и иконка.
В examples немного примеров.
При генерации получаем файл "musiq sharing n in playlist.png", где n — количество очков, playlist — название плейлиста. Имя файла обрезается до 32х символов.
- Заголовок (heading) — большой зелёный текст
- Анонимная группа
- Лого (logo) — внизу справа
- Нижняя группа (bottomGroup) — можно поставить вместо иконки
Для отладки есть околоGET URL-параметры
Число от 1 до 10.
Количество набранных очков в игре.
Влияют на заголовок и текст.
Пример: http://127.0.0.1:5500/main.html?score=2
URL-ссылка на изображение.
Ссылка на обложку плейлиста.
Строка.
Меняет зелёный текст с названием плейлиста.
Пример: http://127.0.0.1:5500/main.html?playlist=Шкатулка с колыбельными
Строка.
Меняет текст внизу справа.
Слева от текста иконка проекта.
Пример: http://127.0.0.1:5500/main.html?bottom=dergunov × qurle
Несколько параметров: http://127.0.0.1:5500/main.html?score=10&cover=https://i.scdn.co/image/ab67706f00000003e1ce4acd2b501398c6d745eb&playlist=mint Presents... Best Dance Songs of 2020&bottom=awesome.devs
Строчка setTimeout(function () { link.click() }, IS_DEBUG ? 500 : 0)
При IS_DEBUG = true скрипт даёт время канвасу прогрузиться. При не-дебаге имитируется нажатие кнопки скачивания сразу же. Если оставить без тайм-аута, то работать не будет.
Colors (enum) — палитра
Sizes (enum) — размеры канваса и повторяющиеся значения
headings[] — большие зелёные заголовки
texts[] — маленькие белые незаголовки