Анимированный gif только петли один раз в Chrome и Firefox

Ответ 1

У меня была та же проблема с моим классом кодировщика/декодера GIF, который я написал некоторое время назад (и время от времени улучшался). Я нашел решение для этого только вчера. GIF полностью прекрасен, проблема в современной стороне интернет-браузера. Зараженные браузеры - это Opera, IE, Chrome (не тестировали других).

После некоторого исследования по этому вопросу (путем сравнения циклов и несинхронизации изображений) я обнаружил, что эти браузеры GIF декодеры игнорируют параметры цикла в файле GIF. Вместо этого они зависят от недокументированного расширения приложения в первом кадре файла GIF.

Таким образом, решение состоит в том, чтобы добавить эту команду расширения непосредственно перед данными первого кадра. Добавьте этот кусок:

0x21,0xFF,0x0B,"NETSCAPE","2.0",0x03,0x01,0x00,0x00,0x00

Это заставит браузеры бесконечно зацикливаться.

Здесь пример:

Вид шестнадцатеричного просмотра, чтобы вы могли увидеть, как он добавлен:

GIF не чувствителен при вставке/переупорядочивании фрагментов без изображения, поэтому вы можете вставить это перед первым изображением в любом месте между любым другим расширением. Я положил его непосредственно после заголовка + палитры. Это можно сделать с помощью С++ или любого другого языка. (повторное кодирование не требуется). Для получения дополнительной информации см.:

• Как найти, где начинается Image Block в GIF-изображениях?
• Декодировать байты данных из потока растровых данных GIF87a

[Редактировать Ридом Данкелем]

Вы также можете сделать это вручную с помощью Hex Editor. Я использовал "Hex Fiend" на macOS Sierra.

Найдите 21 F9 в начале фрагмента hex (это заголовок). На фото выше 21 F9 04 04 00 00 00 00. Возможно, вы немного отличались, но обратите внимание, что он предшествует 2C, который отмечает начало блока изображения.

Перед 21 F9... частью вставьте следующий шестнадцатеричный символ, помеченный как "расширение приложения" на фотографии выше:

21 FF 0B 4E 45 54 53 43 41 50 45 32 2E 30 03 01 00 00 00

Сохраните и протестируйте его.

Addon by Spektre: Beware 21 F9 отмечает расширение gfx, которое необязательно, поэтому оно может не присутствовать для всех или любых фреймов (но в наши дни это очень редко)

Ответ 2

Вы можете использовать инструмент командной строки gifsicle для обработки анимированного gif и добавить правильный цикл, совместимый со всеми браузерами:

Animation options: -l, --loopcount[=N] Set loop extension to N (default forever).

поэтому в терминале я:

$ gifsicle --loopcount problem.gif > fixed.gif

Создает новый Анимированный GIF, который работает в Chrome и Firefox, а также Safari.

Ответ 3

Вы можете указать конечное число циклов, или вы можете сделать цикл фильма навсегда. INFINITE (или -1) циклически перемещает фильм снова, пока страница находится на экране. Например, этот код создает фильм, который непрерывно циклически:

<img 
  src="../graphics/moonflag.mpg" 
  dynsrc="../graphics/moonflag.mpg"
  loop=infinite
  alt="Astronauts on the moon">

Источник

Ответ 4

Написал PHP gif fixer на основе ответа Spektre:

/**
 * gif image loop fixer, prints image full url
 * 
 * as this is written as a part of framework, there are some config options
 */

// put your images absolute path here eg '/var/www/html/www.example.com/images/'
// or use autodetection below
$GLOBALS['config']['upload_path'] = str_replace("\\", "/", trim(getcwd(), " /\\")).'/images/';

// put your images relative/absolute url here, eg 'http://www.example.com/images/';
$GLOBALS['config']['upload_url'] = '/images/';

function _ig($image){

    $image_a = pathinfo($image);

    $new_filename = $GLOBALS['config']['upload_path'].$image_a['dirname'].'/_'.$image_a['filename'].'.'.$image_a['extension'];
    $new_url = $GLOBALS['config']['upload_url'].$image_a['dirname'].'/_'.$image_a['filename'].'.'.$image_a['extension'];

    if ($image_a['extension'] == 'gif'){

        if (!file_exists($new_filename)){

            // load file contents
            $data = file_get_contents($GLOBALS['config']['upload_path'].$image);

            if (!strstr($data, 'NETSCAPE2.0')){

                // gif colours byte
                $colours_byte = $data[10];

                // extract binary string
                $bin = decbin(ord($colours_byte));
                $bin = str_pad($bin, 8, 0, STR_PAD_LEFT);

                // calculate colour table length
                if ($bin[0] == 0){
                    $colours_length = 0;
                } else {
                    $colours_length = 3 * pow(2, (bindec(substr($bin, 1, 3)) + 1)); 
                }

                // put netscape string after 13 + colours table length
                $start = substr($data, 0, 13 + $colours_length);
                $end = substr($data, 13 + $colours_length);

                file_put_contents($new_filename, $start . chr(0x21) . chr(0xFF) . chr(0x0B) . 'NETSCAPE2.0' . chr(0x03) . chr(0x01) . chr(0x00) . chr(0x00) . chr(0x00) . $end);

            } else {

                file_put_contents($new_filename, $data);

            }

        }

        print($new_url);

    } else {

        print($GLOBALS['config']['upload_url'].$image);

    }

}

Это делает копию образа .gif как _image.gif с нужной строкой, вставленной после таблицы цветов, и выводит новый url-адрес src. (Проверяет, что изображение уже исправлено.)

Использование:

<img src="<?php _ig($image); ?>">

или

<img src="<?php _ig('image.gif'); ?>">

Отказ от ответственности: никаких обязанностей не принято, и я знаю, что это можно оптимизировать:)