画像に枠線を追加
枠線を追加すると、内側の元画像を変更しなくてもキャンバス全体の大きさが変わります。この計算ツールでは、元の幅と高さをピクセルで指定し、上・右・下・左の四辺に同じ太さの枠線を加えた正確な外寸を求めます。指定した色も結果に保持されるため、デザイン仕様書、書き出し処理、画像の自動処理フローに計算結果をそのまま引き継いでいただけます。
無料で実行
書き出し前にキャンバス寸法を確認できます
枠線は元画像の各辺の外側に領域を追加します。そのため、20ピクセルの枠線を付けても、幅や高さが20ピクセルだけ増えるわけではありません。幅には左側の20ピクセルと右側の20ピクセルが加わり、高さにも上側と下側の各20ピクセルが加わります。元画像の幅と高さ、枠線一辺の太さ、使用する色をご入力ください。元の寸法と新しい外寸が一緒に返されるため、変更内容を簡単に確認できます。画像編集ソフトを開く前、バッチ処理の規則を作成する前、レイアウト上の領域を確保する前の確認に便利です。この計算では、画像の拡大縮小、切り抜き、引き伸ばし、符号化は行いません。寸法だけを求めるため、元の画像領域が変わったかどうかで迷うこともありません。枠線の太さには0も指定でき、その場合の外寸は元の寸法と同じです。見える枠線が不要な場合でも、ソフトウェア側で同じ計算手順を維持できます。
枠線の計算式をご確認ください
計算式は単純で、常に同じ結果になります。外側の幅は元の幅に枠線の太さの2倍を加え、外側の高さも元の高さに同じ値を加えます。2倍にするのは、各軸に向かい合う二つの辺があるためです。たとえば、幅1200ピクセル、高さ800ピクセルの画像に24ピクセルの枠線を付けると、外寸は1248×848ピクセルになります。色は寸法に影響しませんが、後続の処理で見た目の指定と寸法をまとめて扱えるよう、結果に含めて返します。元の幅と高さには、実際のラスターキャンバスを表す正の整数をご指定ください。枠線の太さには0または正の有限数を指定できるため、一般的な整数ピクセルだけでなく、小数を使うレイアウト計算にも対応します。負の値は外側への追加ではなく切り抜きや内側への変更を表すため、エラーになります。画像の端からピクセルを取り除く場合は、別途切り抜き計算をご利用ください。
デザインや自動処理に結果を活用できます
返された外寸は、レイアウト設計、キャンバス作成、素材の検証、保存容量の見積もりに直接お使いいただけます。開発では、元画像を枠線の分だけずらして描画する前に、必要なキャンバスを算出できます。デザインでは、枠付きのサムネイルが固定サイズのカードやマーケットプレイスの枠内に収まるか確認できます。制作チームでは、何千点もの素材を処理する前に、結果をアップロード上限と比較できます。この処理は決定的な算術計算だけを使うため、同じ入力からは必ず同じ結果が得られます。ネットワーク要求、ファイルのアップロード、乱数、隠れた画像変換はありません。指定した色は解釈や変換をせず、ラベルとして扱います。そのため、16進コード、CSSの色名、独自のトークンは、前後の空白だけを除いて保持されます。API の料金は1回 $0.002 です。応答には元の寸法と外寸の両方が含まれ、記録が分かりやすくなり、素材寸法と完成後のキャンバス寸法の混同を防げます。
活用例
枠線付きキャンバスを準備
元画像を変更せずに新しい色付きの枠内へ配置する前に、必要なキャンバスの正確な寸法を計算できます。
出品画像の寸法を検証
均一な枠線を加えた商品画像が、アップロードやレイアウトの上限内に収まるか確認できます。
画像の一括処理を計画
すべての画像を描画するためのリソースを投入する前に、自動処理の出力寸法を確定できます。
よくある質問
新しい寸法はどのように計算されますか?
各軸の両側に枠線が付くため、幅と高さのそれぞれに枠線の太さの2倍を加えます。
画像の変更やアップロードは行われますか?
いいえ。寸法と枠線の設定だけを受け取り、画像ファイルを読み込んだり変更したりせずに計算結果を返します。
枠線の太さに0を指定できますか?
はい。0は有効な値であり、外寸は元の画像寸法と同じになります。
枠線の太さが負の場合はどうなりますか?
負の値は外枠の追加ではなく領域の削除や内側への変更を示すため、入力エラーになります。
どのような色形式を指定できますか?
CSSの色名、16進表記、独自フローのトークンなど、空でない色ラベルを指定できます。値は解釈せずに保持されます。
API での計算料金はいくらですか?
API は1回 $0.002 です。ネットワーク接続が不要なため、ブラウザー版の実行機能でも計算できます。
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/image/add-border \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"width":1200,"height":800,"border_width":24,"color":"#1d4ed8"}'const res = await fetch("https://api.kit.forhosting.com/image/add-border", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"width": 1200,
"height": 800,
"border_width": 24,
"color": "#1d4ed8"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/add-border",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"width": 1200,
"height": 800,
"border_width": 24,
"color": "#1d4ed8"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/add-border", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"width":1200,"height":800,"border_width":24,"color":"#1d4ed8"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"width":1200,"height":800,"border_width":24,"color":"#1d4ed8"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/add-border", 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,
"border_width": 24,
"color": "#1d4ed8"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.add_border",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |