Cssスプライト生成ツール

アップロードした複数の画像（PNG、JPEG、SVG）を 1 枚の PNG スプライトシートに結合して canvas 上に描画し、対応する CSS background-position ルールを出力します。3 つのレイアウト（horizontal、vertical、packed）を提供します。オプションでピクセル単位の Padding をスプライト間に挿入できます。

1. アップロード欄をクリックするか、画像ファイルをドラッグ＆ドロップします。PNG、JPEG、SVG が受け付けられ、画像以外のファイルは除外されます。 2. Layout（Horizontal、Vertical、Packed）と、オプションで Padding（ピクセル単位、0-100）を選びます。 3. Generate をクリックします。チェッカーボード背景の上にスプライトのプレビューが表示されます。 4. Download をクリックして sprite.png を保存し、Copy CSS で生成された CSS ルールをコピーします。

Horizontal は画像を左から右へ 1 行に並べ、高さは最も背の高い画像と等しくなります。Vertical は上から下へ 1 列に積み上げ、幅は最も広い画像と等しくなります。Packed は、ceil(sqrt(count)) に最も広い画像の幅を掛けた折り返し幅に基づいて行を折り返します。生成される CSS は画像ごとに 1 つの '.icon-<name>' クラスを出力し、width、height、'background: url(sprite.png) no-repeat' 宣言、および負の background-position を持ちます。ファイル名は拡張子が削除され、[a-zA-Z0-9_-] にサニタイズされます。