今日は、PNG 形式のアニメーションステッカーをオンラインで探していました〜LINE から盗んだことは言わないでください〜、そして、APNG という形式について知りました。WeChat と QQ は APNG をサポートしていないため、APNG を GIF に変換しました。しかし、APNG を GIF に変換した後、WeChat での再生は 1 回しかできないことがわかり、GIF のループ回数を一括で変更する方法が必要になりました。
そのため、APNG について簡単に説明し、APNG を GIF に一括変換するオンラインツールを提供しましたが、このツールでは無限ループを実現することはできません。そのため、Node.js とバッチスクリプトの 2 つの異なる実装方法を使用して、GIF のループ回数を一括で変更する方法を共有しました。これにより、Node.js 開発者や Windows ユーザーが簡単に一括処理を行うことができます。
APNG とは?#
APNG(Animated Portable Network Graphics)は、PNG のビットマップアニメーション拡張であり、PNG 形式の動画効果を実現することができます。APNG は GIF と比較して、画像の品質とディテールの表現において優れており、さらに多くのブラウザが APNG をサポートするようになることで、次世代の動画の標準の一つになる可能性があります。主な違いは以下の通りです:
-
画像の品質:GIF は最大で 256 色しかサポートせず、アルファ透明チャネルもサポートしていないため、カラフルな画像や半透明効果を持つ画像では品質が低下します。一方、APNG はより高品質な画像をサポートし、より多くの色とアルファ透明チャネルを含めることができ、アニメーション効果がより滑らかになります。
-
構造の原理:APNG と GIF はどちらも複数のフレームで構成されるアニメーションですが、APNG の構造の原理は超自然的な下位互換性を許容しています。APNG の最初のフレームは標準の PNG 画像であり、ブラウザが APNG の後続のアニメーションデータを認識しなくても、最初のフレームを表示することができます。そして、ブラウザが APNG をサポートしていれば、後続のフレームを再生してアニメーション効果を実現します。
-
ブラウザのサポート:Chrome 59 以降、Chrome ブラウザは APNG をサポートし始め、ほとんどのブラウザで APNG アニメーションを表示することができます。ただし、IE ブラウザは APNG をサポートしていません。
詳細はこちらを参照してください:https://xtaolink.cn/268.html
APNG を一括で GIF に変換する#
このツールを使用すると、APNG を一括で GIF に変換することができますが、無限ループはできません。
https://cdkm.com/cn/png-to-gif
GIF を無限ループに一括変更する#
bat(一般ユーザー向け)#
以下はバッチスクリプト(.bat)を使用して同じ機能を実現する方法です:
@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
C:\path\to\directory
を実際のディレクトリパスに置き換えてください。上記のコードを.bat
ファイルとして保存し、ダブルクリックで実行します。スクリプトは指定したディレクトリ内のすべての.gif
ファイルを走査し、変更を行います。
バッチスクリプトの機能は比較的限られているため、バイナリファイルを直接読み取ることはできません。上記のスクリプトでは、ファイルの最初の行を読み取ることでファイルの内容をシミュレートしています。ファイルを変更する際には、バイナリ操作は行わずに、変更後のデータを直接ファイルに書き込みます。この方法はすべての場合に適用されるわけではなく、特に大きなファイルを処理する場合にはパフォーマンスの問題が発生する可能性があります。より複雑なバイナリファイルの処理が必要な場合は、他のプログラミング言語やツールを使用することを検討してください。
Node(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);
上記のコードでは、Node.js のファイルシステムモジュール(fs
)を使用してファイルを読み取り、書き込みます。また、./path/to/directory
を実際のディレクトリパスに置き換える必要があります。このスクリプトを実行する前に、Node.js がインストールされていることを確認してください。
このスクリプトは、指定したディレクトリ内のすべてのファイルを一括で処理し、拡張子が.gif
のファイルに対してunlimitedGifRepetitions
関数を呼び出して変更を行います。変更後のデータは元のファイルに書き戻されます。コンソールの出力には、変更されたファイルの情報や発生したエラーの情報が表示されます。
詳細はこちらを参照してください:https://www.b612.me/golang/232.html
より良いツール#
このバッチ処理ツールは、複数の APNG ファイルを一括で GIF ファイルに変換し、変換後の GIF ファイルを一括で無限ループに設定することができます。