Как использовать putImageData с анимированными гифками, используя HTML5 canvas и Javascript?

Question

Я хочу манипулировать данными изображения каждого кадра анимированного GIF-файла во время его воспроизведения в браузере, и я хочу сделать это с помощью HTML5 canvas и Javascript.Например, у меня есть анимированный GIF, и я хочу преобразовать каждый кадр в оттенки серого, как он воспроизводится в браузере.Это возможно?Всякий раз, когда я манипулирую данными изображения в анимированном GIF, отображается только первый кадр (правильно манипулировать), и GIF не будет играть дальше.Это было бы очень полезным методом, если бы было решение для этого.Спасибо.

РЕДАКТИРОВАТЬ: Есть ли способ запросить текущий кадр анимированного GIF в Javascript, так что я могу просто использовать putImageData в изображение в процессе анимации?

Answer 1

Как указывает эта страница , вы можете использовать drawImage (), чтобы нарисовать GIF на холсте, и в данный момент он будет рисовать текущий кадр из GIF в Gecko и WebKit - ноне в Opera, а также не в соответствии со спецификацией, поэтому не стоит полагаться на это поведение.Насколько я знаю, нет способа получить данные отдельных кадров из DOM;Я некоторое время разбирался с этим, прежде чем написать jsgif (который был упомянут в другом ответе, но на самом деле не предназначен для какого-либо практического использования, как есть - он очень неэффективен, например).

Если вы можете избежать распаковки фреймов на сервере и затем анимировать их вручную (например, Gmail делает ), это может быть вашим лучшим вариантом.