画像コラージュ作成ガイド

複数の画像をグリッド、フリーフォーム、または雑誌風のコラージュにまとめます。間隔、枠線、背景色、アスペクト比を調整可能です。すべての処理はブラウザ内でローカルに実行されるため、サーバーへのアップロードは一切行われません。

必要なもの

ブラウザ — OffscreenCanvasをサポートするChrome、Firefox、Safari、またはEdge 対応形式 — JPG、JPEG、PNG、WEBP、AVIF、GIF、BMP、またはTIFF 制限 — 1ファイルあたり20 MBまで（20 MBを超えるファイルは拒否されます） アカウント — 不要 インターネット — ページ読み込み後は不要

コラージュの作成方法

ブラウザでImage Collageを開きます。ファイルエクスプローラーから複数の画像ファイルをドラッグし、アップロードゾーンにドロップします。または、アップロードエリアをクリックしてデバイスから複数のファイルを選択してください。各ファイルは20 MBの制限内である必要があります。制限を超えるファイルは拒否されます。レイアウトタイプ（グリッド、フリーフォーム、雑誌）を選択します。グリッドは画像を均一な行と列に配置します。フリーフォームは各画像をキャンバス上のどこにでもドラッグして配置できます。雑誌はサイズや位置を混ぜた編集スタイルのレイアウトを適用します。カラーピッカーを使用して背景色を設定します。スライダーを使用して画像間の間隔を調整します。枠線の幅と色を設定して追加します。グリッドレイアウトの場合は列数を指定します。雑誌レイアウトの場合はキャンバスのアスペクト比を調整します。生成ボタンをクリックします。OffscreenCanvas APIがすべての画像を1つのキャンバスに合成します。libvipsはレイアウト選択に従って各画像を配置し、間隔と枠線を適用して背景を塗りつぶします。データはネットワーク経由で送信されません。コラージュが生成されるとダウンロードボタンが表示されます。クリックしてデバイスに保存してください。ブラウザはメモリからディスクへ直接ファイルを書き込みます。ダウンロード後、libvipsは一時メモリバッファを自動的に解放します。

仕組み

Image CollageはOffscreenCanvas APIを使用して、複数の画像を1つのキャンバスに合成します。画像をアップロードすると、ブラウザはそれらを直接メモリに読み込むため、サーバーへのアップロードは発生しません。

libvipsはレイアウトの選択と画像数に基づいてキャンバスの寸法を計算します。グリッドレイアウトでは、合計画像数と列設定から行と列の寸法を計算してキャンバスを均一なセルに分割し、各セルに等しいピクセル領域を割り当てます。フリーフォームレイアウトでは、デフォルトの配置を使用しますが、各画像をキャンバス上の任意の座標にドラッグして変更できます。雑誌レイアウトでは、サイズを混在させる編集ルールを適用し、大きな画像にはより広いキャンバス領域を、小さな画像にはその周囲の隙間を埋めるように配置します。

各画像はOffscreenCanvasレンダリングを使用して、計算された位置にキャンバスへ描画されます。libvipsはセル境界の間にピクセル単位の隙間を設けることで画像間の間隔を適用し、選択した幅と色で長方形を描画して枠線を追加し、画像が合成される前にカラーピッカーの値を使用して背景を塗りつぶします。

合成後、libvipsはcanvas toBlobメソッドを使用してキャンバスをPNGまたはJPEG画像に変換し、ピクセルデータを指定した画像形式にエンコードします。生成されたバイナリデータはURL. createObjectURLを介して提供され、ブラウザがダウンロード用にファイルを提供するためのメモリ参照ポインタを作成します。ダウンロードが完了すると、libvipsはURL.

ファイルはすべてブラウザ内でOffscreenCanvasを使用して処理されます。ConvertCraftのサーバーにアップロードされることはありません。元のファイルはデバイスに残ります。libvipsはそれらをメモリに読み込んでコラージュを合成し、ダウンロード後にピクセルバッファを破棄します。

問題が発生した場合

一部のファイルがアップロードできない：ファイルが20 MBの制限を超えています。OffscreenCanvasは厳格なメモリ制限内で動作します。20 MBを超える画像を処理するにはRAM上に巨大な非圧縮ピクセルバッファが必要となり、ブラウザタブがクラッシュする可能性があります。

画像が歪んで見える：コラージュレイアウトは画像をセルに合わせるためにスケーリングするため、アスペクト比が歪むことがあります。元の比率を維持するオプションを使用するか、セルの寸法を画像に合わせて調整してください。

キャンバスが大きすぎる：高解像度の画像を多数使用すると、キャンバスが非常に大きくなります。ブラウザのメモリが不足する可能性があるため、画像数を減らすか、解像度の低いソースファイルを使用してください。

コラージュの配置がずれている：グリッドレイアウトでは、一貫した寸法の画像が必要です。アスペクト比が一致しないと間隔が不均一になります。アップロード前に画像を同じ比率にトリミングしてください。

### 何枚まで画像を含められますか？

実用的な制限はブラウザの利用可能なメモリに依存します。libvipsはメモリ制約を管理するために画像を順番に処理します。動作が遅くなったりクラッシュしたりする場合は、画像数を減らしてみてください。

### 個々の画像の位置を調整できますか？

フリーフォームレイアウトでは、各画像をキャンバス上の任意の位置にドラッグできます。グリッドおよび雑誌レイアウトは固定の配置ルールを使用します。各画像の配置を手動で制御したい場合は、フリーフォームモードに切り替えてください。

### 出力されるファイル形式は何ですか？

コラージュはデフォルトで画質を保持するPNG形式で保存されます。ファイルサイズを小さくしたい場合は、非可逆圧縮のJPEGを選択できます。形式の選択はダウンロード前に行えます。