Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Создание gif-анимации из нескольких canvas элементов (https://javascript.ru/forum/events/63895-sozdanie-gif-animacii-iz-neskolkikh-canvas-ehlementov.html)

fesson 07.07.2016 02:27

Создание gif-анимации из нескольких canvas элементов
 
Доброго времени суток, уважаемый формучане, пишу вам в надежде найти решение моей задачи, над которой уже бьюсь пару дней.
Исходные данные следующие:
Есть несколько сanvas.getImageData().data.
Нужно из них собрать gif анимацию и отобразить пользователю через <img src="url:data">

Примерный процесс "конвертации", как я его понял: сanvas.getImageData().data (Он же RGB) -> RAW(hex) -> base64. Возможно там еще где-то ascii или что-то вроде.
Вопросы, которые возникли.
Как перевести из RGB в hex (Структуру gif я примерно понял), чтобы получился промежуточные данные, которые можно вставить в txt сохранить и получить gif. Это так, для проверки получившегося результата.
Там что-то с blob связано? не пойму?
Возможен ли перевод из hex в base64 без использования php и сторонних библиотек, стандартными средствами javascript.
Буду благодарен любому фидбэку.

Яростный Меч 07.07.2016 05:21

Соображения навскидку:

1. Не надо использовать getImageData. Анимированная гифка - это несколько неанимированных гифок в одном файле, только с общим заголовком и футером, и, возможно, с общей палитрой (если у всех одинаковая). Потому нет смысла делать вручную из imageData, лучше использовать метод toBlob для каждой канвы.

2. У каждого блоба, используя метод slice, взять изображение - некую внутреннюю часть, без заголовочной информации. Общий заголовок сотворить вручную, используя Uint8Array. Так же сделать общий футер. И всё это добро передать в конструктор Blob. Потом к этому блобу подойти с функцией URL.createObjectURL, либо в крайнем случае использовать FileReader, хотя не знаю, в каком браузере это нужно (где есть FileReader, но нет URL.createObjectURL).

Метод toBlob асинхронный, с коллбэком, потому надо будет их несколько запустить параллельно и дождаться всех результатов. Но, думаю, для такого сурового чувака как ты это не проблема.

fesson 07.07.2016 13:33

Спасибо, нашел решение, воспользовался вот этой библиотечкой.
https://github.com/antimatter15/jsgif


Часовой пояс GMT +3, время: 16:24.