Convert animated PNG (APNG) to GIF and loop infinitely

/ 折影轻梦

Original link: https://nexmoe.com/1GSAPJA.html

Today I found some animated emoticons in PNG format on the Internet . I won’t tell you that I stole the emoticons from LINE , so I learned that they are in APNG format. Since WeChat and QQ do not support APNG, we converted APNG to GIF. After converting APNG to GIF, we found that it could only be played once on WeChat, which raised the question of how to batch modify the number of GIF loops.

So I’m going to give a brief introduction to APNG. And provides an online tool that can batch convert APNG to GIF, but the tool cannot achieve infinite loop. So I shared a method to modify the number of GIF loops in batches, using two different implementation methods: Node.js and batch scripts. It is convenient for Node developers and ordinary users using Windows to process batches directly.

What is APNG?

APNG (Animated Portable Network Graphics) is a bitmap animation extension of PNG, which can achieve dynamic picture effects in PNG format. APNG has advantages over GIF in terms of picture quality and detail performance, and as more and more browsers support APNG, it is expected to become one of the standards for the next generation of dynamic graphics. The main differences are as follows:

  1. Picture quality: GIF supports up to 256 colors and does not support Alpha transparency channel, which results in poor quality of GIF on colorful pictures and pictures with translucent effects. APNG can support higher quality pictures, including more colors and Alpha transparent channels, making the animation effect more delicate.

  2. Composition principle: Both APNG and GIF are animations composed of multiple frames, but the composition principle of APNG allows supernatural backward compatibility. The first frame of APNG is a standard PNG image. Even if the browser does not recognize the animation data behind the APNG, it can display the first frame without any obstacles. And if the browser supports APNG, it can play the subsequent frames to achieve animation effects.

  3. Browser support: Starting from Chrome 59, the Chrome browser begins to support APNG, allowing most browsers to display APNG animations. Only IE browser does not support APNG.

For more information, please refer to: https://xtaolink.cn/268.html

APNG batch to GIF

This tool can convert APNG to GIF in batches, but it cannot loop infinitely.

https://cdkm.com/cn/png-to-gif

Batch modify GIF to infinite loop

bat (ordinary users please use this method)

Here’s how to use a batch script (.bat) to achieve the same functionality:

 @ echo off
 setlocal enabledelayedexpansion

 set "directoryPath=C:\ path \to\directory"

 for /r " %directoryPath% " %%f in (*.gif) do (
 echo Modifying %%~ nxf
 call :modifyGif " %%f "
 )

 exit /b

 :modifyGif
 set "filePath=%~ 1 "

 set /p data=<" %filePath% "
 set "index= !data:~0,16! "
 set "modifiedData= !data:~0,16! !data:~16,1! !data:~17,1! !data:~19! "

 echo . !modifiedData! >" %filePath% "

 exit /b

Please replace C:\path\to\directory with your actual directory path. Save the above code as a .bat file and double-click to run it. The script will traverse all .gif files in the specified directory and modify them.

Note that batch scripts have relatively limited capabilities and cannot read binary files directly. The above script simulates reading the file contents by reading the first line of the file. When modifying a file, it writes the modified data directly to the file without performing binary operations. This approach may not work in all situations, and there may be performance issues especially when working with large files. If more complex binary file processing is required, consider using another programming language or tool to implement it.

Node (the method used by Nexmoe) 

 const fs = require ( 'fs' );
 const path = require ( 'path' );

 function unlimitedGifRepetitions ( path ) {
 const data = fs. readFileSync (path);

 const index = data. indexOf ( Buffer . from ([ 0x21 , 0xFF , 0x0B ]));
 if (index < 0 ) {
 throw new Error ( `Cannot find Gif Application Extension in ${path} ` );
 }

 data[index + 16 ] = 255 ;
 data[index + 17 ] = 255 ;

 return data;
 }

 function batchModifyGifFilesInDirectory ( directoryPath ) {
 fs. readdir (directoryPath, ( err, files ) => {
 if (err) {
 console . error ( 'Error reading directory:' , err);
 return ;
 }

 files. forEach ( file => {
 const filePath = path. join (directoryPath, file);
 const fileExtension = path. extname (file);

 if (fileExtension === '.gif' ) {
 try {
 const modifiedData = unlimitedGifRepetitions (filePath);
 fs. writeFileSync (filePath, modifiedData);
 console . log ( `Modified ${file} ` );
 } catch (error) {
 console . error ( `Error modifying ${file} :` , error);
 }
 }
 });
 });
 }

 const directoryPath = './path/to/directory' ;
 batchModifyGifFilesInDirectory (directoryPath);

Note that the above code uses Node.js’s file system module ( fs ) to read and write files. Additionally, ./path/to/directory needs to be replaced with the actual directory path. Before executing this script, make sure Node.js is installed.

This script will traverse all files in the specified directory in batches and call the unlimitedGifRepetitions function to modify the files with the .gif suffix. Modified data will be written back to the original file. In the console output, you can see information about each file that was modified or any error messages that occurred.

For more information, refer to: https://www.b612.me/golang/232.html

This article is reproduced from: https://nexmoe.com/1GSAPJA.html
This site is only for collection, and the copyright belongs to the original author.