Nexmoe

Nexmoe

一个开发者。关于勇敢与热爱,互联网/创造/赛博朋克
twitter
github

動画 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 をサポートするようになることで、次世代の動画の標準の一つになる可能性があります。主な違いは以下の通りです:

  1. 画像の品質:GIF は最大で 256 色しかサポートせず、アルファ透明チャネルもサポートしていないため、カラフルな画像や半透明効果を持つ画像では品質が低下します。一方、APNG はより高品質な画像をサポートし、より多くの色とアルファ透明チャネルを含めることができ、アニメーション効果がより滑らかになります。

  2. 構造の原理:APNG と GIF はどちらも複数のフレームで構成されるアニメーションですが、APNG の構造の原理は超自然的な下位互換性を許容しています。APNG の最初のフレームは標準の PNG 画像であり、ブラウザが APNG の後続のアニメーションデータを認識しなくても、最初のフレームを表示することができます。そして、ブラウザが APNG をサポートしていれば、後続のフレームを再生してアニメーション効果を実現します。

  3. ブラウザのサポート: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 が使用している方法)#

image

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

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。