画像をレターボックスに合わせる
画像を切り抜かず、引き伸ばさずに決まった枠へ収めます。1920×1080の写真を1000×1000の正方形に入れると1000×562になり、上下に219ピクセルの帯が付きます。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 元の幅
- 1,920
- 元の高さ
- 1,080
- キャンバスの幅
- 1,000
- キャンバスの高さ
- 1,000
- スケール
- 0.5208333333
- Fit
- letterbox
画像を推測で調整したり、変形や切り抜きを行ったりせず、固定サイズのキャンバス内へ収められます。元画像の幅と高さ、対象キャンバスの寸法を入力すると、均一な拡大縮小率、最終的な整数ピクセルサイズ、上下左右の正確な帯幅が得られます。横帯、縦帯、縦横比の完全一致も判別するため、動画フレーム、プレゼンテーション、画像処理工程、レスポンシブなプレビューに活用できます。
画像全体と本来の比率を保ちます
contain 方式のフィットでは、元画像のすべてのピクセルが対象キャンバス内に表示されます。計算機は元画像とキャンバスの縦横比を比較し、横方向と縦方向のうち小さい拡大縮小率を選び、その1つの値を両方の寸法へ適用します。そのため円は円のままで、人物の顔が押しつぶされることも、構図の一部が切り取られることもありません。
返される幅と高さは、キャンバスを超えない整数のピクセル値です。比例計算の結果がピクセルの中間になる場合、制約となる辺をキャンバス端に合わせ、もう一方を切り捨てます。切り上げると1行または1列が外へ出る可能性があるためです。
ピクセル丸め前の数学的な scale も返すので、グラフィックソフトの設定や複数サイズの比較に使えます。4つの寸法はすべて正の整数でなければなりません。0では有効な縦横比を定義できないため、無限値を返さず入力エラーとして扱います。
横帯と縦帯の値を読み取れます
bars オブジェクトは、上、右、下、左に残る余白をピクセル単位で示します。横長の画像を比較的縦長のキャンバスへ置くと縦方向に空きが生じ、上下に横帯ができます。縦長または細長い画像を比較的横長のキャンバスへ置くと横方向に空きが生じ、左右に縦帯ができます。
元画像とキャンバスの縦横比が同じ場合は exact と判定され、4つの帯はすべて0です。画像は常に中央へ配置されます。余ったピクセル数が偶数なら、向かい合う帯は同じ幅です。
奇数なら上または左を小さい側とし、残る1ピクセルを下または右へ割り当てます。この決定規則により合計寸法が必ずキャンバスと一致し、半ピクセルの曖昧な配置を避けられます。値はそのまま padding、オフセット、描画座標として利用でき、画像の原点は left と top の位置になります。
画像や動画の処理工程へ適用できます
書き出した後ではなく、リサイズする前にこの結果をご利用ください。対象キャンバスを作成または選択し、任意の再サンプリング方式で元画像を返された幅と高さへ変更してから、left と top のオフセット位置へ配置します。残りの領域は単色、透明、ぼかした拡張画像など、ご希望の背景で埋められます。
この機能は画像バイトを解析せず、色の選択や再サンプリングも行いません。ファイル形式や描画ライブラリから独立した幾何計算だけを提供します。バッチ処理では早い段階で寸法を検証し、後続工程が同じ配置を参照できるよう結果を保存してください。
同一入力からは常に同一の寸法と配置が得られます。
活用例
動画フレームを準備
映像や静止画を固定解像度へ収め、エンコード前に正確な帯幅を確認できます。
切り抜かないプレビュー
商品写真、作品、文書を内容を失わず均一なカードの中央へ配置できます。
プレゼンテーションを設計
スライド、デジタルサイネージ、画面用の画像領域と均等な余白を計算できます。
よくある質問
画像は切り抜きや変形を受けますか?
いいえ。 両辺へ同じ倍率を適用して画像全体を保ち、未使用領域を帯で埋めます。
向かい合う帯が1ピクセル違うのはなぜですか?
奇数の空き領域は整数ピクセルへ均等に分割できないため、余分な1ピクセルを右または下へ割り当てます。
縦横比が最初から一致する場合はどうなりますか?
exact と判定され、画像がキャンバス全体を満たし、4つの帯はすべて0になります。
不明な寸法に0を指定できますか?
いいえ。 0では有効な縦横比を定義できないため、すべて正の整数を指定してください。
画像ファイル自体をリサイズしますか?
いいえ。 幾何情報だけを計算します。返されたサイズとオフセットを任意の描画ツールでご利用ください。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/image/letterbox-fit \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"source_width":1920,"source_height":1080,"canvas_width":1000,"canvas_height":1000}'const res = await fetch("https://api.kit.forhosting.com/image/letterbox-fit", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"source_width": 1920,
"source_height": 1080,
"canvas_width": 1000,
"canvas_height": 1000
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/letterbox-fit",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"source_width": 1920,
"source_height": 1080,
"canvas_width": 1000,
"canvas_height": 1000
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/letterbox-fit", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"source_width":1920,"source_height":1080,"canvas_width":1000,"canvas_height":1000}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"source_width":1920,"source_height":1080,"canvas_width":1000,"canvas_height":1000}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/letterbox-fit", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"source_width": 1920,
"source_height": 1080,
"canvas_width": 1000,
"canvas_height": 1000
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.letterbox_fit",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_mb | 15 |
max_megapixels | 12 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
画像や動画の処理工程へ適用できます
そのため CSS、Canvas、SVG、FFmpeg、ImageMagick、モバイル API、プレゼンテーション、サムネイル処理で同じ結果を使えます。API リクエストは $0.002 で、同じ決定的な計算はブラウザーでも実行できます。
技術的な質問
計算の料金はいくらですか?
API は1リクエスト $0.002 です。ブラウザーでは無料で計算できます。