画像に縁取りを追加（ステッカー風）

ダイカットステッカーを囲む太い白フチ、切り抜いた商品やキャラクターの周りの色付きの縁、にぎやかな背景で絵文字を引き立てる輪郭。どれも、絵の長方形ではなく形に沿っています。このツールは、すべてのピクセルが形の縁からどれだけ離れているかを測り、選んだ太さどおりの縁取りを、外側、内側、または縁を中心に描きます。なめらかなアンチエイリアスの曲線と、任意のドロップシャドウにも対応します。透過PNG、WebP、GIF、SVGの画像で使え、すべてブラウザ内で動作します。

使い方

1. 背景が透明な画像を1枚以上選びます。
2. 縁取りの太さと色を設定します（白がステッカーらしい定番の見た目です）。
3. 外側、内側、中心のいずれかを選びます。
4. 必要ならドロップシャドウを追加します。
5. PNGをダウンロードします。縁取りが切れないよう、キャンバスは広がります。

計算式

縁取りの不透明度 = clamp(w + 0.5 − d, 0, 1)（d = ピクセルから最も近い形のピクセルまでの距離）

dは厳密なユークリッド距離で、2パスの距離変換（FelzenszwalbとHuttenlocher）ですべてのピクセルについて計算するため、角はなめらかな円弧になり、太さはどの方向でも同じです。ピクセルの不透明度がエッジのしきい値以上であれば、そのピクセルは形に属します。内側の縁取りでは、逆に各形のピクセルから最も近い透明ピクセルまでの距離を測ります。

計算例

猫の600 × 600の透過PNGに12 pxの白い外側の縁取りを付けると、626 × 626の画像になります（四方に12 + 1 pxが加わります）。猫から6 px外側のピクセルは完全な白、12 px離れたピクセルは半分だけ覆われ（なめらかな縁）、13 px離れたピクセルは透明のままです。