Найти в Дзене
Ты ж программист!

Анимируем аватар на платформе Bastyon

Не так давно я рассказывал о платформе Bastyon в этой статье. Площадка развивается, понемногу обрастает новыми инструментами и многие пользователи интересовались, каким образом можно поставить анимированный аватар (гифку) для своего профиля. 💾Немного введения И так, много кто хотел бы поставить гифку в качестве аватара, но легального способа сделать это нет. Рассмотрим один не совсем легальный способ. 💾1. Порядок действий Что нам понадобится: 1. Найти нужную гифку (*.gif) изображение 2. Конвертировать его в анимированный PNG - APNG 3. Найти способ разместить/захостить это изображение из п.2, чтобы на него была прямая ссылка по аналогии с https://i.imgur.com/LcpFBoo.png 4. Отредактировать профиль через режим отладки вашего браузера и подменить аватарку. А теперь давайте по порядку. 💾2. Конвертируем анимацию в APNG Любым известным вам способомм конфвертируем .gif в .png (apng). Я использую этот ресурс, где, перейдя по ссылке, выбираем ваш файл и жмём Upload. После загрузки жмём на к
Оглавление

Не так давно я рассказывал о платформе Bastyon в этой статье.

Площадка развивается, понемногу обрастает новыми инструментами и многие пользователи интересовались, каким образом можно поставить анимированный аватар (гифку) для своего профиля.

💾Немного введения

И так, много кто хотел бы поставить гифку в качестве аватара, но легального способа сделать это нет. Рассмотрим один не совсем легальный способ.

💾1. Порядок действий

Что нам понадобится:

1. Найти нужную гифку (*.gif) изображение

2. Конвертировать его в анимированный PNG - APNG

3. Найти способ разместить/захостить это изображение из п.2, чтобы на него была прямая ссылка по аналогии с https://i.imgur.com/LcpFBoo.png

4. Отредактировать профиль через режим отладки вашего браузера и подменить аватарку.

А теперь давайте по порядку.

💾2. Конвертируем анимацию в APNG

Любым известным вам способомм конфвертируем .gif в .png (apng).

Я использую этот ресурс, где, перейдя по ссылке, выбираем ваш файл и жмём Upload.

-2

После загрузки жмём на кнопку Convert to APNG! и после конвертации после надписи Output APNG image жмём Save в окне ниже:

-3

Получаем APNG изображение.

П.С. Просмотр изображений может не проигрывать анимацию. Откройте изображение в браузере, чтобы увидеть, что оно анимировано.

💾3. Загружаем на хостинг

Используйте любой хостинг изображений, с которого после загрузки можно будет получить прямую ссылку на изображение!!! вида:

https://i.imgur.com/LcpFBoo.png

Обязательно с протоколом и разрешением файла, иначе работать не будет - проверено.

Из рекомендаций могу посоветовать imgur.com, но без плясок с бубном не зарегаетесь на нём, т.к. с Россией они не играют... Я регался используя VPN Британского IP и подтверждал аккаунт через fakesms с помощью СМС на номер британского телефона - погуглите сервисы фейковых СМС, например, https://receive-smss.com/

Как вариант можете попробовать postimages.org - в России доступен, чтобы не париться с imgur.com.

-4

💾4. Меняем аватарку

Заходим в Управление -> Редактировать профиль

-5

Переходим в режим разработчика браузера (обычно это клавиша F12).

Ищем вкладку Network (Сеть) - или как-то так будет называться, зависимо от браузера. Задача найти здесь файл *.js. Нажимаем кнопку F5 для обновления ресурсов и ждём полной прогрузки страницы редактирования.

Находим файл "join.min.js?v=XXXXXXXXXXXX", где вместо X цифры идентификатора вашего профиля.

-6

Жмём ПКМ (правой кнопкой мыши) на файле и выбираем Open in Source tab/Открыть исходный код/Открыть Источники или что-то такое, зависит от браузера.

Вас перекинет на вкладку Source/Источники с открытой вкладкой нужного файла профиля. Нажимаем на две фигурные скобы (Pretty print), чтобы отформатировать Plain text в режим нормального кода, а не быдло кода.

-7

Нажимаем ctrl + F для открытия поиска и вводим там имя функции: common: function(s, i, o, r, c)

-8

Делаем точку останова в режиме debug/отладки. Для этого жмём мышкой слева от поля кода на цифру напротив строки с искомой функцией, в примере у меня это 17992 цифра. Если всё верно, то следующая строчка отметится голубым:

-9

Теперь меняем аватар через кнопку Изменить иконку пользователя, не перезагружая страницу!!! выбираем Завершить, после чего жмём Сохранить внизу страницы. Т.к. большая часть экрана занята, скрольте страницу неспеша.

П.С. загружать можно любое фото, даже не аватарку, это важно, т.к. мы сделаем подмену.

Теперь как только сработает точка останова, разверните в локальных переменных как на картинке переменную i, а в ней атрибут image, у которого будет переменная v с ссылкой.

-10

Делаем двойной клик по ссылке после переменной v и вставляем заранее заготовленную ссылку из третьего пункта инструкции в кавычках и жмём Enter

-11

Теперь возвращаем с паузы точку останова, нажимая на продолжить (F8 в хроме) или значок Play:

-12

Вот и всё, готово!

Жмём F5 для обновления страницы и ждём, пока транзакция будет принята блокчейном. То, что вы увидите анимацию не значит, что блокчейн принял эту транзакцию!

Важно, чтобы в вашем профиле на вкладке Настройки локальное хранилище транзакций было пустое! Примерно вот так:

-13

А вот он и результат👍😉

-14