이미지 윤곽선 넣기 (스티커 테두리)

다이컷 스티커를 두른 두꺼운 흰 테두리, 누끼 딴 상품이나 캐릭터를 둘러싼 색 테두리, 복잡한 배경 위에서 이모지가 돋보이게 하는 윤곽선. 이 모두는 그림의 사각형이 아니라 모양을 따라갑니다. 이 도구는 모든 픽셀이 모양의 가장자리에서 얼마나 떨어져 있는지 측정해, 고른 굵기 그대로의 윤곽선을 바깥, 안쪽, 또는 가장자리를 중심으로 그립니다. 부드러운 안티앨리어싱 곡선과 선택 사항인 그림자도 지원합니다. 투명 PNG, WebP, GIF, SVG 이미지에서 작동하며 모두 브라우저 안에서 이뤄집니다.

사용 방법

1. 투명한 배경의 이미지를 하나 이상 고릅니다.
2. 윤곽선의 굵기와 색을 정합니다(흰색이 전형적인 스티커 모양입니다).
3. 바깥쪽, 안쪽, 가장자리 중심 중에서 고릅니다.
4. 원하면 그림자를 넣습니다.
5. PNG를 받습니다. 윤곽선이 잘리지 않도록 캔버스가 커집니다.

계산식

윤곽선 불투명도 = clamp(w + 0.5 − d, 0, 1), 여기서 d = 픽셀에서 가장 가까운 모양 픽셀까지의 거리

d는 정확한 유클리드 거리로, 두 번 훑는 거리 변환(Felzenszwalb와 Huttenlocher)으로 모든 픽셀에 대해 계산하므로 모서리는 부드러운 호가 되고 굵기는 모든 방향에서 같습니다. 픽셀의 불투명도가 가장자리 기준값 이상이면 모양에 속합니다. 안쪽 윤곽선은 반대로, 각 모양 픽셀에서 가장 가까운 투명 픽셀까지의 거리를 잽니다.

예시

고양이의 600 × 600 투명 PNG에 12 px 흰색 바깥 윤곽선을 넣으면 626 × 626 이미지가 됩니다(사방에 12 + 1 px 추가). 고양이에서 6 px 바깥의 픽셀은 완전히 흰색, 12 px 떨어진 픽셀은 절반만 덮이고(부드러운 가장자리), 13 px 떨어진 픽셀은 투명하게 남습니다.