動画 PNG(APNG) を GIF に変換し、無限ループさせる

今日はオンラインで 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 ファイルを一括で無限ループに設定することができます。

Github Repo not found

The embedded github repo could not be found…