画像の角を丸くする
画像の角を丸くする処理は単純に見えますが、半径が短辺の半分を超えると幾何学的に成立しません。この計算ツールは、画像処理を始める前に幅、高さ、指定半径を検証します。正しい入力では、許容される最大半径と角丸長方形のアルファマスクに関する明確な説明を返します。不正な入力は直ちにエラーになるため、デザインツール、書き出しスクリプト、コンテンツ管理システムで、描画前に実現できない設定を除外できます。
無料で実行
画像処理の前に半径を検証できます
画像の幅と高さを正の整数ピクセルで入力し、希望する角丸半径をピクセル単位で指定してください。計算ツールは短い方の辺を求め、それを2で割って、向かい合う角の円弧が交差しない最大半径を算出します。たとえば1200×800ピクセルの画像では短辺が800ピクセルなので、有効な最大半径は400ピクセルです。0から400までの値を指定でき、レイアウトや描画エンジンがサブピクセル形状に対応している場合は小数も利用できます。上限を超える値は拒否され、計算された上限を示す入力エラーが返されます。この確認を画像変換処理より先に行うことで、ファイルの読み込み、アップロード、描画とは切り離して、軽量な幾何学判定だけを実行できます。ブラウザーのフォームとAPIで同じ規則を共有できるため、一方だけが値を黙って縮め、もう一方が失敗するような不一致も防げます。幅と高さは実際のラスター寸法を表すため正の整数、半径は0以上の有限数である必要があります。
角丸長方形マスクの仕組みをご確認ください
検証に成功すると、元画像と同じ幅と高さを持つアルファマスクが説明されます。中央部分は不透明なままです。各角では、指定半径の4分の1円弧が境界になります。角丸長方形の内側にあるピクセルは表示され、4つの円弧の外側にあるピクセルはマスク適用時に透明になります。この機能は処理内容を説明するもので、画像ファイルのアップロード、デコード、変更は行いません。半径が0の場合は通常の不透明な長方形になり、角のピクセルは削られません。最大半径では短い寸法に沿って円弧同士が接します。そのため、正方形の画像は円になり、長方形の画像はカプセルに似た形になります。応答には、検証済みの寸法、半径、計算された最大半径、人が読めるマスクの説明が含まれます。ログ、検証メッセージ、デザイン仕様書、描画前に効果を説明する後続処理へそのまま利用できます。補間方法は指定しません。アンチエイリアスは、実際にマスクを適用する画像エンジン側の役割だからです。
設計と自動処理で同じ幾何学規則を使えます
半径の検証規則を統一すると、モックアップ、Webサイト、モバイルアプリ、一括画像処理の間で生じる細かな差を防げます。デザインシステムでは、トークンを公開する前にアバターやカードの仕様を確認できます。メディアサービスでは、処理資源を割り当てる前に不正な変換要求を拒否できます。オンラインストアでは、選択された角丸が生成対象のすべてのサムネイルサイズで利用できるか確認できます。この機能が行うのは決定的な計算と文字列の生成だけなので、同じ入力からは常に同じ結果が得られます。ネットワーク、乱数、時刻、保存領域、隠れた画像操作は使用しません。角丸は端の表示状態だけを変え、キャンバス自体を拡大縮小しないため、元画像の幅と高さは維持されます。最大半径は短辺だけで決まるので、幅と高さを入れ替えても上限は変わりません。API の料金は1回 $0.002 で、同じ純粋な計算をブラウザーでは無料で実行できます。返された説明を処理計画や検証記録に使い、検証済みの半径を実際のピクセル変換を行う別の描画処理へ渡してください。
活用例
アバター形状を確認
プロフィール画像の半径が有効か確認し、正方形のアバターが完全な円になるか判定できます。
画像変換APIを保護
元画像をアップロード、デコード、描画する前に、実現できない角丸設定を拒否できます。
デザイントークンを検証
共通の半径を各画像サイズと比較し、Web、モバイル、書き出しで同じ動作を保てます。
よくある質問
指定できる最大の角丸半径はいくつですか?
短い方の寸法の半分です。800×600ピクセルの画像では、最大半径は300ピクセルです。
半径が大きすぎる場合はどうなりますか?
画像寸法から計算した最大半径を含む入力エラーが返され、処理は失敗します。
この機能は画像ファイルを変更しますか?
いいえ。寸法を検証してアルファマスクを説明するだけです。ピクセルへの適用は別の描画処理で行います。
半径に0や小数を指定できますか?
はい。0は角を削らない長方形マスクを表し、上限内であれば有限の小数も指定できます。
角丸にするとキャンバス寸法は変わりますか?
いいえ。マスクは元の幅と高さを保ち、円弧の外側にあるピクセルだけを透明にします。
API の利用料金はいくらですか?
API は1回 $0.002 です。決定的な計算なので、ネットワークを使わずブラウザーでも実行できます。
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/image/round-corners \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"width":1200,"height":800,"radius":64}'const res = await fetch("https://api.kit.forhosting.com/image/round-corners", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"width": 1200,
"height": 800,
"radius": 64
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/round-corners",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"width": 1200,
"height": 800,
"radius": 64
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/round-corners", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"width":1200,"height":800,"radius":64}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"width":1200,"height":800,"radius":64}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/round-corners", 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,
"radius": 64
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.round_corners",
"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 | リクエストが多すぎます。しばらく待ってから再度お試しください。 |