ForHosting KIT · 画像の編集・解析

三分割法グリッドのピクセル座標計算

三分割法グリッド計算ツールは、画像の幅と高さを基に、縦線2本、横線2本、それらが交わる4点の正確なピクセル座標を求めます。画像編集ソフト、カメラ画面、切り抜きツール、デザインシステム、自動画像処理などで構図ガイドを配置する際に利用できます。寸法が3で割り切れない場合も小数座標を維持するため、描画側でサブピクセル表示や整数への丸め方を適切に選択できます。

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

無料で実行 API仕様を見る

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

三分割法の座標が示すもの

三分割法のオーバーレイは、長方形の画像を同じ幅の3列と同じ高さの3行に分けます。この計算ツールでは、指定された幅の3分の1と3分の2に縦のガイド線を置き、高さの3分の1と3分の2に横のガイド線を置きます。線が交わる4点は、人物、顔、水平線上の要素、その他の視覚的な中心を配置する目安としてよく使われます。座標の原点は画像の左上です。xは右方向に、yは下方向に増加します。これは、ラスター画像、Webのcanvas、ブラウザー、画像編集ソフトで一般的な座標系です。結果には元の幅と高さも含まれ、縦線、横線、交点が別々の配列で返されるため、必要な要素を簡単に扱えます。画像のピクセルを解析したり、構図の良し悪しを判定したり、画像を切り抜いたり、被写体を移動したりする機能ではありません。別のアプリケーションが描画、保存、比較、構図支援に利用できる決定論的な幾何情報だけを提供します。

小数ピクセルと入力検証の扱い

各座標は、途中で丸めず、画像全体の寸法から直接計算します。幅が1200ピクセルなら、縦線のx座標は正確に400と800です。幅が1000ピクセルなら、JavaScriptの数値表現では333.3333333333333と666.6666666666666になります。小数を残す理由は、描画システムによって要件が異なるためです。ベクター形式のcanvasはサブピクセル位置に描画できますが、ラスター処理では切り捨て、切り上げ、四捨五入、または端末に合わせた配置が適切な場合があります。計算段階で一律の丸め方を強制すると、その選択肢が失われ、左右または上下の外側領域に幅の差が生じる可能性があります。幅と高さには、ラスター画像の寸法を表す有限の正の整数が必要です。幅または高さがゼロの画像には有効な幾何学的領域がないため、ゼロは明示的に拒否されます。負数、小数、未指定の項目、文字列、無限大、数値以外の値も、不正な入力としてエラーになります。

編集ソフトや自動処理での結果の使い方

オーバーレイを描くには、返された各x座標で、yがゼロの位置から画像の全高まで縦線を引きます。各横線は、返されたy座標で、xがゼロの位置から画像の全幅まで引きます。4つの交点はあらかじめ列挙されているため、組み合わせを再計算せずに、ハンドル、ターゲット、マーカー、スナップ位置として利用できます。レスポンシブ表示では、CSS上の表示サイズではなく、画像本来のピクセル寸法で計算してください。その後、画像表示に使用した倍率と同じ倍率を座標に適用します。切り抜き処理では、最終的な長方形の寸法が確定してから、その範囲に対して計算します。三分割線は完成後のフレームを基準にするためです。この関数は純粋であり、ネットワーク、乱数、時刻、画像のデコード、保存状態を使用しません。同じ入力からは常に同じJSONが得られるため、Webツール、サーバー検証、テスト、再現可能な制作工程に適しています。ブラウザーでは無料で、API リクエストは $0.002 です。

活用例

画像編集ソフトにガイドを描画

作業中のキャンバス寸法を座標に変換し、均等な三分割法グリッドを重ねられます。

カメラ画面に構図の目印を追加

固定オフセットを使わず、現在の解像度からフォーカスや被写体配置用の4点を設定できます。

切り抜きレイアウトを検証

予定する切り抜き範囲の三分割位置を求め、重要な被写体座標と構図ガイドを比較できます。

よくある質問

どのような座標が返されますか？

縦線のx座標2つ、横線のy座標2つ、およびそれらの線が交わる4点が返されます。

座標の原点はどこですか？

画像の左上が原点です。xは右方向に、yは下方向に増加します。

小数のピクセル位置は丸められますか？

いいえ。利用側の描画処理でサブピクセルまたは整数への配置方法を選べるよう、小数を維持します。

幅または高さがゼロの場合はどうなりますか？

寸法がゼロの画像には有効なグリッドを配置できないため、不正な入力としてエラーになります。

API リクエストの料金はいくらですか？

API は1リクエスト $0.002 です。同じ決定論的な計算をブラウザーで無料実行することもできます。

開発者向け — APIアクセス

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

エンドポイント

POSThttps://api.kit.forhosting.com/image/grid-overlay-thirds

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

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

curl -X POST https://api.kit.forhosting.com/image/grid-overlay-thirds \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"width":1200,"height":800}'

const res = await fetch("https://api.kit.forhosting.com/image/grid-overlay-thirds", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "width": 1200,
    "height": 800
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/image/grid-overlay-thirds",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "width": 1200,
    "height": 800
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/grid-overlay-thirds", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"width":1200,"height":800}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"width":1200,"height":800}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/grid-overlay-thirds", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "width": 1200,
  "height": 800
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "image.grid_overlay_thirds",
  "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の完全なドキュメントを見る →