Создание 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. Буду благодарен любому фидбэку. |
Соображения навскидку:
1. Не надо использовать getImageData. Анимированная гифка - это несколько неанимированных гифок в одном файле, только с общим заголовком и футером, и, возможно, с общей палитрой (если у всех одинаковая). Потому нет смысла делать вручную из imageData, лучше использовать метод toBlob для каждой канвы. 2. У каждого блоба, используя метод slice, взять изображение - некую внутреннюю часть, без заголовочной информации. Общий заголовок сотворить вручную, используя Uint8Array. Так же сделать общий футер. И всё это добро передать в конструктор Blob. Потом к этому блобу подойти с функцией URL.createObjectURL, либо в крайнем случае использовать FileReader, хотя не знаю, в каком браузере это нужно (где есть FileReader, но нет URL.createObjectURL). Метод toBlob асинхронный, с коллбэком, потому надо будет их несколько запустить параллельно и дождаться всех результатов. Но, думаю, для такого сурового чувака как ты это не проблема. |
Спасибо, нашел решение, воспользовался вот этой библиотечкой.
https://github.com/antimatter15/jsgif |
Часовой пояс GMT +3, время: 16:24. |