Gif animé ne boucle qu'une fois sur Chrome et Firefox

J'ai été confronté au même problème avec ma classe encodage / décodeur GIF que j'ai écrite il y a quelque temps (et l'amélioration de temps en temps). J'ai découvert la solution pour cela hier. Le GIF est complètement correct. Le problème est sur le côté du navigateur internet moderne. Les navigateurs infectés sont Opera, IE, Chrome (n'a pas testé d'autres).

Après une enquête sur la question (en comparant les images en boucle et non en boucle), j'ai découvert que ces décodeurs GIF de navigateurs ignorent les paramètres de bouclage dans le fichier GIF . Au lieu de cela, ils dépendent de l'extension de l'application sans papiers dans la première image du fichier GIF .

Donc, la solution consiste à ajouter cette commande d'extension juste avant la première image d'image. Ajouter ce morceau:

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

Cela obligera les navigateurs à boucler sans fin.

Voici l'exemple:

Hex pour que vous voyiez comment il est ajouté:

Le GIF n'est pas sensible lors de l'insertion / réorganisation de morceaux non-image de données afin que vous puissiez l'insérer avant la première image sur n'importe quel endroit entre n'importe quelle autre extension. Je l'ai mis directement après header + palette. Ce qui peut être fait avec C ++ ou toute autre langue. (Il n'est pas nécessaire de coder à nouveau). Pour plus d'informations, voir:

• Comment trouver où commence Image Block les images GIF?
• Décoder les octets de données du flux de données raster GIF87a

[Edit by Reed Dunkle]

Vous pouvez également le faire manuellement avec un éditeur Hex. J'ai utilisé "Hex Fiend" sur MacOS Sierra.

Recherchez 21 F9 dans les parties début de l'hex (c'est l'en-tête). Dans la photo ci-dessus, il est 21 F9 04 04 00 00 00 00 . Le vôtre pourrait être légèrement différent, mais notez qu'il vient avant 2C , qui marque le début d'un bloc d'image.

Avant la section 21 F9 …, insérez l'hex suivant, marqué comme "extension d'application" dans la photo ci-dessus:

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

Enregistrez, et testez-le.

Addon by Spektre: Méfiez-vous de 21 F9 marque le morceau d'extension gfx qui est optionnel. Il peut ne pas être présent pour toutes ou toutes les images (mais c'est vraiment rare ces jours-ci)

Vous pouvez utiliser l' outil de ligne de commande gifsicle pour traiter un gif animé et ajouter la boucle correcte compatible avec tous les navigateurs:

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

Donc dans le terminal I do:

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

Ce qui produit un nouveau GIF animé qui fonctionne dans Chrome et Firefox ainsi que Safari.

Vous pouvez soit indiquer un nombre fini de boucles, soit vous pouvez faire la boucle de film pour toujours. INFINITE (ou -1) boucle le film à plusieurs reprises tant que la page est sur l'écran. Par exemple, ce code produit un film qui boucle continuellement:

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

La source

Écrit le fixateur PHP gif basé sur la réponse de 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); } } 

Cela fait une copie de l'image.gif sous _image.gif avec la chaîne nécessaire insérée après la table des couleurs et imprime la nouvelle URL src. (Vérifie si l'image est déjà réglée en premier).

Usage:

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

ou

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

Avertissement: aucune responsabilité n'est prise et je sais que cela peut être optimisé 🙂