1. 序章

複数の画像を1つにマージしてスプライトファイルを作成するのは面倒な場合があります。 画像がたくさんある場合や、画像が頻繁に変更される場合は、特に時間がかかる可能性があり、このプロセスを繰り返す必要があります。

このチュートリアルでは、1つのコマンドでLinuxターミナルで画像をすばやくマージする方法を学習します。

2. 使用事例

画像をナビゲーションのボタンとして使用するWebアプリケーションプロジェクトがあるとします。 そのために必要なjpegファイルを保存する「icons」というディレクトリがあります。 これらすべてのファイルを1つのスプライトファイルにマージし、後でCSSスプライトとして使用します。

それらを更新したいことが多いので、プロジェクトのビルド中にこれらのアイコンをマージするコマンドまたはスクリプトが必要です。

3. ImageMagickを使用した画像のマージ

ターミナルで画像を操作するには、ImageMagickを使用します。 「icons」ディレクトリからすべての画像を取得し、それらを垂直に追加します。

$ magick ./icons/*.jpg -append nav-sprite.jpg

何らかの理由で水平スプライトが必要な場合は、コマンドの「+append」「-append」に置き換える必要があります。

$ magick ./icons/*.jpg +append nav-sprite.jpg

実行時間から数秒を短縮することに関心がある場合は、GraphicsMagickと呼ばれるImageMagickの軽量フォークを使用することもできます。 画像の追加に関する使用法は同じです。

$ gm convert ./icons/*.jpg -append nav-sprite.jpg

4. 大きな画像の処理

スプライトとして使用される画像は通常小さいです。 ただし、いくつかの大きなファイルを処理したい場合は、ImageMagickのデフォルトの制限のために問題が発生する可能性があります。 幸い、ImageMagickの「policy.xml」ファイルを編集することでこれらの制限を変更できます。

“ / etc / ImageMagick-7” ディレクトリ(7は現在インストールされているImageMagickのバージョン)にあります。 または、findコマンドを使用することもできます。

$ find / -name policy.xml

特に「リソース」ドメインの行に関心があります。

<policy domain="resource" name="memory" value="2GiB"/>
<policy domain="resource" name="map" value="4GiB"/>
<policy domain="resource" name="width" value="10KP"/>
<policy domain="resource" name="height" value="10KP"/>
<policy domain="resource" name="area" value="100MP"/>
<policy domain="resource" name="disk" value="16EiB"/>
<policy domain="resource" name="file" value="768"/>
<policy domain="resource" name="thread" value="4"/>
<policy domain="resource" name="time" value="3600"/>

たとえば、ピクセル制限を2倍に拡張し、それに応じてメモリを調整できます。

<policy domain="resource" name="memory" value="8GiB"/>
<policy domain="resource" name="map" value="16GiB"/>
<policy domain="resource" name="width" value="20KP"/>
<policy domain="resource" name="height" value="20KP"/>
<policy domain="resource" name="area" value="400MP"/>

5. Netpbmを使用した画像のマージ

Netpbmツールキットを使用して画像を連結することもできます。 pnmcat と呼ばれるシンプルなツールがあり、私たちがやりたいことを実行するために作成されていますが、pnmイメージで動作します。 最初に画像をpnm形式に変換し、次にそれらを連結して、最後に目的の形式に変換し直します:

$ pnmcat -lr <(pngtopnm ./icons/1.png) <(pngtopnm ./icons/2.png) | pnmtopng > nav-sprite.png

透明性なしでまったく同じサイズの画像をマージする限り、これは正しく機能します。 さまざまなサイズの画像を処理する場合は、「 -jtop 」パラメータを追加して、画像を最終的な画像の上部に揃える必要があります。 透明度を使用する場合は、アルファチャネルマスクを作成してpnmtopngコマンドに渡す必要があります。

$ pnmcat -jtop -lr <(pngtopnm ./icons/1.png) <(pngtopnm ./icons/2.png) | pnmtopng -alpha <(pnmcat -black -jtop -lr <(pngtopnm -alpha ./icons/1.png) <(pngtopnm -alpha ./icons/2.png))> nav-sprite.png

6. 結論

このチュートリアルでは、ImageMagickを使用して複数の画像を1つにマージする方法を学びました。 また、いくつかの構成オプションを確認し、デフォルトのメモリ制限を拡張しました。 次に、Netpbmツールキットを使用して同じ仕事をすることを検討しました。