Как найти где происходит отрисовка лого в этом примере на canvas'е?

Question

[Aison]

Ребят, есть страница многорпопулярной игры, мне нужно найти как там происходит отрисовка лого, я вроде нашёл файл отвечающий за это и там есть лого images/main_title.a478ae9c.png но нет, не то. Оно как-то под язык подставляет. Сам canvas лежит тут https://webstatic-sea.hoyoverse.com/ys/event/e2022... тут и пути к картинкам для этой отрисовки.

Сама страница: https://webstatic-sea.hoyoverse.com/ys/event/e2022...

Не сразу полез задавать вопрос, потратил кучу времени, но уже никак. Не силён в js

Comments

[Ivan Brezhnev]

Можно поставить точку остановки в Debugger (вашего браузера) в месте объявления функции с лого, и посмотреть по stack trace откуда она вызывается

[Aison]

Ivan Brezhnev, наконец-то дельный совет. я просто уже на stackoverflow отписал, но там минусы ставят. может я что-то не так описал, но вроде бы понятно...

но я так же не знаю, где объявлена функция с логотипом, там кода много, а js я не знаю. базовый уровень только или даже ниже

[Ivan Brezhnev]

Aison, А где визуально найти данный логотип в игре?

[Aison]

Ivan Brezhnev,

если Вы имеете ввиду, где на странице найти, то этот текст "Когда цветёт сакура". нужно подменить, с остальным проблем нету.

В файле https://webstatic-sea.hoyoverse.com/ys/event/e2022... есть такая строка (путь с полной ссылокой я уже подставил, а там просто images/main_title.a478ae9c.png)

"N+D9": function (t, e, n) {
            t.exports = n.p + "https://webstatic-sea.mihoyo.com/ys/event/e20220207-previ/images/main_title.a478ae9c.png";
        },

, но её подмена ничего не даёт, да и если посмотреть, то картинка другая. пробовал искать по этому ключу N+D9 и нашёл в файле https://webstatic-sea.hoyoverse.com/ys/event/e2022... какое-то вхождение. но я даже не знаю, что значит это N+D9 может координаты, переменную?

[Ivan Brezhnev]

Если кратко, то "N+D9" это просто ключ в объекте по которому webpack обращается к конкретному модулю, результат работы webpack, по факту там просто лежит функция которая выполняет роль псевдо-модуля)))

[Aison]

Ivan Brezhnev, жуть. и как сложно будет понять, где она там ?.. я уже думаю, что не стоит парится из-за этого и сделать уже что-нибудь, но и на будущее хотелось бы понять, дальше то проще будет. есть же декомпиляторы в нормальный js?

Answer 1

[Евгений Винокуров]

А зачем нужна отрисовка именно этого лого? Там все минифицировано и оптимизировано вебпаком, поэтому в коде что-то искать сложно и, считаю, не нужно.

Есть несколько алгоритмов для такой обрисовки логотипа. Можно экспортнуть png картинку, которую вы нашли, в base64 и дальше рисовать на канвасе (так, я думаю, на сайте Михуе и используется). Можно рисовать SVG через canvas. Можно рисовать с нуля прямо на канвасе.

* Много способов - обычно используют метод с base64. В целом гугл и ютуб дадут огромное множество туторов по тому как это делать быстро и правильно - найти инфу не сложно)

Comments

[Aison]

нет-нет, мне не сделать нужно, мне нужно найти как они сделали, чтобы заменить. Я хочу его повернуть, подменить картинку своей. Про base64 я знаю, сам то я уже прошерстил и сделал то, что смог. Нашёл пути к картинкам)))

Мне для собственных нужд, нужно лого анимированное сделать на основе их страницы.

base64 я прошерстил, нету там его. Если через devtool по источнику порыскать, то можно найти лого это в таком формате 44a4045f9d5568e3e442a8673bf7f5d4_5425283799281548042.png явно какой-то хеш.

Пологаю, что тут есть какая-то часть отвечающая за лого https://webstatic-sea.hoyoverse.com/ys/event/e2022... там 4 мб. Библиотеки всякие.

Не думаю, что они отрсовали "Когда цветёт сакура" прямо на canvas'е, но быть может. Проще пути к картинкам под язык нужный менять.