ForHosting KIT · 画像の編集・解析

画像コラージュのセル配置を計算

画像コラージュのレイアウト計算機は、行単位で並べた画像寸法の一覧を完全なグリッド形状へ変換します。各列に必要な幅と各行に必要な高さを求め、コラージュ全体のキャンバス寸法と各セルの正確な矩形を返します。HTML、canvas、SVG、デザインツール、画像処理パイプラインで画像を正確に配置でき、オフセットを手作業で加算したり、セルの重なりを心配したりする必要がありません。

● Beta無料・ブラウザ内で実行

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

画像寸法を行順にご用意ください

各画像の幅と高さを一組にして、最初の行を左から右へ、その後も次の行を同じ順序で指定してください。rows と cols はグリッドの形を定義するため、その積は画像レコードの件数と完全に一致する必要があります。この厳密な確認により、意図した形と入力一覧が一致せず、空のセルが残ったり余分な画像が無視されたりする一般的な問題を防げます。幅と高さには正の有限数を指定します。整数だけでなく小数も利用できるため、ピクセル、ポイント、ミリメートルなど、一貫した任意の単位に対応できます。ただし、アルゴリズムはすべての数値を同じ座標系として扱うので、一つのリクエスト内で単位を混在させないでください。レスポンスには計算済みセルとともに元画像の幅と高さも保持されます。そのため、各セルを元画像に対応付け、後続処理でフィット、切り抜き、配置方法を適切に決められます。

セル寸法の計算方法をご確認ください

各列の幅には、その列に属する元画像のうち最大の幅が採用されます。同様に、各行の高さには、その行で最大の画像高さが採用されます。したがって交点のセルは列幅と行高を持ち、グリッドの境界をそろえながら、各画像を元の寸法で収められます。計算機は、前にある列幅の合計から x オフセットを、前にある行高の合計から y オフセットを作ります。最初のセルはゼロ、ゼロから始まります。コラージュ全体の幅は列幅の合計、高さは行高の合計です。この方法では、任意の目標キャンバス寸法や拡大縮小規則を追加せず、コンパクトな長方形グリッドを作成します。計算対象は形状だけであり、画像の引き伸ばし、切り抜き、回転、中央揃えは行いません。これらの表示方針は、返されたセル矩形と保持された元寸法を使って後から適用できます。

描画処理で結果をご利用ください

cells 配列は入力画像と同じ順序でお読みください。各要素には、ゼロ始まりのインデックス、行、列、x と y の原点、セルの幅と高さ、元画像の幅と高さが含まれます。canvas の描画処理では各矩形へ画像を描けます。CSS の生成処理では column_widths と row_heights を明示的なグリッドトラックへ変換でき、SVG の生成処理では画像要素を追加する前にクリッピング矩形を作れます。出力は決定論的で環境依存の値を含まないため、同じリクエストならブラウザー、ビルド処理、API のいずれでも同一の形状になります。拡大縮小せず中央へ置く場合は、セル寸法から元寸法を引き、それぞれの差を二分してください。cover または contain の動作には、セルと画像のアスペクト比から倍率を求めます。表示方針を分離することで、計算を予測可能かつ検証しやすい状態に保てます。

活用例

canvas 上で写真コラージュを作成

寸法が異なる画像を一つのキャンバスへ描く前に、重ならない描画先の矩形を計算します。

CSS Grid のトラックを明示的に生成

返された列幅と行高を、各トラックで最大の画像に合うグリッドテンプレートへ変換します。

SVG コンタクトシートを設計

画像、ラベル、クリッピングパス、枠線を追加する前に、セルと全体の viewBox を作成します。

よくある質問

料金はいくらですか？

API リクエストごとの料金は $0.002 です。この計算はブラウザー内でも実行できます。

列の幅はどのように決まりますか？

その列に割り当てられた元画像のうち、最大の幅が列幅として使われます。

行の高さはどのように決まりますか？

その行に割り当てられた元画像のうち、最大の高さが行高として使われます。

画像の拡大縮小や切り抜きも行いますか？

いいえ。セル形状を計算し、元画像の寸法を保持します。拡大縮小、切り抜き、中央揃え、配置は描画時に決定します。

画像数がグリッドと一致しない場合はどうなりますか？

画像数が rows と cols の積に等しくなければならないことを示す、無効な入力エラーが返されます。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/image/collage-layout

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/image/collage-layout \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"images":[{"width":640,"height":480},{"width":800,"height":600},{"width":500,"height":700},{"width":720,"height":540}],"rows":2,"cols":2}'

const res = await fetch("https://api.kit.forhosting.com/image/collage-layout", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "images": [
      {
        "width": 640,
        "height": 480
      },
      {
        "width": 800,
        "height": 600
      },
      {
        "width": 500,
        "height": 700
      },
      {
        "width": 720,
        "height": 540
      }
    ],
    "rows": 2,
    "cols": 2
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/collage-layout",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "images": [
        {
            "width": 640,
            "height": 480
        },
        {
            "width": 800,
            "height": 600
        },
        {
            "width": 500,
            "height": 700
        },
        {
            "width": 720,
            "height": 540
        }
    ],
    "rows": 2,
    "cols": 2
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/collage-layout", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"images":[{"width":640,"height":480},{"width":800,"height":600},{"width":500,"height":700},{"width":720,"height":540}],"rows":2,"cols":2}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"images":[{"width":640,"height":480},{"width":800,"height":600},{"width":500,"height":700},{"width":720,"height":540}],"rows":2,"cols":2}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/collage-layout", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "images": [
    {
      "width": 640,
      "height": 480
    },
    {
      "width": 800,
      "height": 600
    },
    {
      "width": 500,
      "height": 700
    },
    {
      "width": 720,
      "height": 540
    }
  ],
  "rows": 2,
  "cols": 2
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.collage_layout",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

制限

`max_mb`	15
`max_megapixels`	12

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

KITの完全なドキュメントを見る →