Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.07.2016, 02:27
Новичок на форуме
Отправить личное сообщение для fesson Посмотреть профиль Найти все сообщения от fesson
 
Регистрация: 07.07.2016
Сообщений: 2

Создание 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.
Буду благодарен любому фидбэку.
Ответить с цитированием
  #2 (permalink)  
Старый 07.07.2016, 05:21
Профессор
Отправить личное сообщение для Яростный Меч Посмотреть профиль Найти все сообщения от Яростный Меч
 
Регистрация: 12.04.2010
Сообщений: 557

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

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

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

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

Последний раз редактировалось Яростный Меч, 07.07.2016 в 12:01.
Ответить с цитированием
  #3 (permalink)  
Старый 07.07.2016, 13:33
Новичок на форуме
Отправить личное сообщение для fesson Посмотреть профиль Найти все сообщения от fesson
 
Регистрация: 07.07.2016
Сообщений: 2

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
DOM, help: Создание элементов динамически javaphp Events/DOM/Window 7 02.01.2016 23:37
Выделение нескольких элементов zebra Элементы интерфейса 4 19.07.2012 16:14
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Ресайз анимационного Gif с сохранением анимации Manjuriano Серверные языки и технологии 1 03.11.2011 11:28
Сложение нескольких значений элементов frolvict jQuery 2 04.12.2010 11:52