Как скачать анимацию из Canvas в GIF?

Question

[DedokDanila]

Привет, задались вопросом с другом (с версткой и JS знакомы очень поверхностно, не кодеры:) как скачать эту гифку
https://boo.world/ru/resources/questions-for-girlfriend

В процессе гугления оказалось, это не гифка, а анимация, графика на JS и как я понял, ее нет на сервере в виде GIF или еще какого-либо формата
Также пытался посмотреть в коде страницы (F12 Page и Sources) информацию по классу (w-full), но из того, что нашел не смог идентифицировать ничего подходящего из гугления по Canvas-у (например https://sky.pro/media/kak-sozdat-animacziyu-na-can... или https://developer.mozilla.org/ru/docs/Web/API/Canv...)
Также по ключевым словам "draw", "animate" ничего не смог найти/понять похожего

P.S. Нет злого умысла в получении и использовании именно этой анимации (если пришлете части необходимого кода, можете ее чутка сломать или вотермарку там вставить), больше желание разобраться возможно ли вообще скачивать/копировать такие анимации без IDE? (Например сразу в GIF формате)

Comments

[SagePtr]

Судя по всему, там это используется: https://github.com/rive-app/rive-wasm

[Farsh1k]

Результат конечно не идеальный. На темном фоне смотрится лучше.


А теперь как я этого добился.
Открыл тот сайт, промотал до анимации (что бы анимация начала работать)
Открыл консоль браузера вставил в нее код и нажал энтер

(() => {
    function loadScript(src, callback) {
        const script = document.createElement('script')
        script.src = src
        script.onload = callback
        document.head.appendChild(script)
    }

    loadScript('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js', () => {

        const canvas = document.querySelector('canvas');
        const zip = new JSZip()
        const files = new Set()
        let run = true

        const downloadZip = (content) => {
            const downloadLink = document.createElement('a')
            downloadLink.href = URL.createObjectURL(content)
            downloadLink.download = 'images.zip'
            downloadLink.click()
        };

        const process = () => {
            if (!run) {
                let i = 0
                files.forEach(imgData => {
                    i++;
                    zip.file(`image_${i}.png`, imgData, {base64: true})
                });

                zip.generateAsync({type: 'blob'}).then(downloadZip)
                return
            }

            const dataURL = canvas.toDataURL()
            const imgData = dataURL.replace(/^data:image\/(png|jpg);base64,/, "")
            files.add(imgData)

            requestAnimationFrame(process)
        };

        requestAnimationFrame(process)

        setTimeout(() => {
            run = false
        }, 3000)
    })
})()

Спустя 3 секунды скачается архив с изображениями. (со временем можно поиграться для более лучшего результата)
Его нужно разархивировать (это важно).
Какое то время назад пилил сервис для работы с изображениями и он позволяет из отдельных кадров склеить гиф. https://blal111111.github.io/gif/
Перенес все отдельные кадры туда и получил готовую гифку.

[DedokDanila]

Farsh1k, Лучший, большое спасибо!