画像キャンバスを余白付きでリサイズ
画像そのもののピクセル寸法を維持したまま、余白付きの大きなキャンバスへ変更する際にご利用ください。画像の幅と高さ、変更後のキャンバス寸法、背景色をご指定いただくと、各辺の正確な余白と、新しいキャンバス上における画像左上の位置を返します。元画像を切り抜いたり、引き伸ばしたり、再サンプリングしたりすることはありません。対象寸法のどちらかが画像より小さい場合は、意図せず作品を変更せずにエラーとしてお知らせします。
無料で実行
処理はブラウザ内で完結します。ファイルは送信されません。無料でご利用いただけます。
元画像の全ピクセルを保ったままキャンバスを広げます
キャンバスの拡張と画像の拡大縮小は、目的が異なります。拡大縮小では画像が占めるピクセル数が変わるため、細部がぼやけたり、慎重に整えた寸法が変わったり、制作要件を満たせなくなったりする場合があります。この計算では画像の幅と高さを一切変更しません。指定されたキャンバス寸法から画像寸法を差し引き、元画像の周囲へ追加すべき空き領域を求めます。すでに適切な大きさの製品写真、イラスト、スクリーンショット、生成素材に、より大きな枠だけを追加したい場合に便利です。正の整数によるピクセル寸法と、後続処理で使用する背景色をご入力ください。結果には画像とキャンバスの寸法、上・右・下・左の余白、画像開始位置の x 座標と y 座標が含まれます。計算に必要なのは幾何情報だけですので、画像ファイルのアップロードやデコードは行いません。
余りのピクセルが奇数になる場合の中央配置をご確認ください
キャンバスと画像の寸法差が偶数であれば、完全な中央配置は単純です。たとえば横方向に 400 ピクセル追加する場合、左と右へそれぞれ 200 ピクセルを割り当てます。差が奇数の場合は、整数ピクセルの同じ二つの値に分割できません。そのため、小さい値を左または上へ、追加の 1 ピクセルを右または下へ割り当てます。横方向の差が 401 なら、左が 200、右が 201 ピクセルです。この規則により位置は常に一定となり、ラスター処理ツールで表現できない小数座標を避けられます。image_position は左余白と上余白に一致するため、描画、合成、コマンドライン処理などの API へそのまま渡せます。左余白、画像幅、右余白の合計は必ずキャンバス幅となり、縦方向も同様ですので、実際の画像処理前に自動検証しやすくなります。
画像処理フローを構築する前に対象寸法をご確認ください
対象キャンバスは、元画像以上の幅と高さを両方備えている必要があります。一方だけでは不十分です。幅が広くても高さが足りなければ縦方向に切れ、高さがあっても幅が足りなければ横方向に切れてしまいます。いずれの場合も無効な入力としてエラーを返すため、計画段階で意図しない切り抜きを発見できます。同一寸法は有効で、四辺の余白がすべて 0 になります。さまざまな素材を扱い、一部がすでに対象寸法と一致している処理フローにも適しています。背景色は特定の色構文として解釈せず、空ではない文字列として扱います。後続ツールが対応していれば、16進色、CSS 形式、色名、transparent などのトークンをご利用いただけます。結果をお好みのライブラリやサービスのキャンバス拡張設定へお使いください。API は1リクエストにつき $0.002 で、同じ入力には常に同じ結果を返します。
活用例
製品写真のキャンバスを統一します
適切な寸法の製品画像を、拡大も切り抜きもせず、統一されたカタログ用キャンバスの中央へ配置できます。
SNS 用画像を安全に準備します
完成した画像を各サービスの大きなキャンバスへ書き出す前に、周囲へ必要な枠の幅を計算できます。
画像処理フローを設定します
元寸法と対象寸法から、後続のキャンバス拡張処理に必要な正確なオフセットを求められます。
よくある質問
画像の拡大縮小や再サンプリングは行われますか?
いいえ。ご指定の画像寸法を維持し、周囲へ追加するキャンバス領域だけを計算します。
対象キャンバスのほうが小さい場合はどうなりますか?
対象の幅または高さが対応する画像寸法より小さい場合、無効な入力としてエラーを返します。
余白が奇数の場合、追加の 1 ピクセルはどこへ入りますか?
追加の 1 ピクセルは右または下へ割り当て、左と上には小さいほうの整数値を使用します。
どの背景色形式に対応していますか?
空ではない任意の色文字列を受け取り、前後の空白を除いて返します。その構文が有効かどうかは後続の画像ツールが判断します。
API リクエストの料金はいくらですか?
API は1リクエストにつき $0.002 です。画像ファイル自体ではなく、寸法と色の文字列だけを使用して計算します。
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/image/canvas-resize-pad \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"image_width":1200,"image_height":800,"canvas_width":1600,"canvas_height":1000,"background_color":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/image/canvas-resize-pad", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"image_width": 1200,
"image_height": 800,
"canvas_width": 1600,
"canvas_height": 1000,
"background_color": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/canvas-resize-pad",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"image_width": 1200,
"image_height": 800,
"canvas_width": 1600,
"canvas_height": 1000,
"background_color": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/canvas-resize-pad", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"image_width":1200,"image_height":800,"canvas_width":1600,"canvas_height":1000,"background_color":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"image_width":1200,"image_height":800,"canvas_width":1600,"canvas_height":1000,"background_color":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/canvas-resize-pad", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"image_width": 1200,
"image_height": 800,
"canvas_width": 1600,
"canvas_height": 1000,
"background_color": "#ffffff"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.canvas_resize_pad",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |