이미지 처리
캔버스를 바탕으로 한 이미지 도우미들입니다. 변환마다 data URL이 아니라 화면 밖 캔버스를 돌려주므로, 여럿을 이어 붙여도 단계마다 PNG로 부호화했다 다시 푸는 일이 없습니다.
사용법
ts
import { getImage, cutRound, opacity } from 'ranuts/utils';
const img = await getImage('/avatar.png');
const rounded = cutRound(img, 24);
const faded = opacity(rounded, 0.5);
document.body.appendChild(faded as HTMLCanvasElement);API
getImage
경로로 이미지를 불러옵니다. 디코딩이 끝나면 이행합니다.
매개변수
| 매개변수 | 설명 | 타입 | 기본값 |
|---|---|---|---|
src | 이미지 경로 | string | 필수 |
반환값
| 인자 | 설명 | 타입 |
|---|---|---|
promise | 불러온 이미지 요소 | Promise<ImgSource> |
TIP
거부될 때 넘어오는 것은 Error 객체가 아니라 날것의 error 이벤트입니다. <img>의 onerror는 이유를 싣고 오지 않습니다. 출처가 다른 실패에 대해서는 브라우저가 일부러 감추기 때문입니다. 그러니 이것을 Error로 감싸 봐야 있지도 않은 메시지를 지어내는 셈이 됩니다.
cutRound
이미지의 모서리를 둥글게 잘라 냅니다.
매개변수
| 매개변수 | 설명 | 타입 | 기본값 |
|---|---|---|---|
img | 원본 이미지 | ImgSource | 필수 |
radius | 모서리 반지름 | number | 필수 |
반환값
| 인자 | 설명 | 타입 |
|---|---|---|
canvas | 화면 밖 캔버스 | ImgSource |
opacity
이미지 전체에 고른 불투명도를 입힙니다.
먼저 ctx.filter(GPU가 처리합니다)를 쓰고, 지원하지 않는 곳에서는 알파 채널을 픽셀마다 고쳐 쓰는 쪽으로 물러섭니다. 물러선 쪽은 알파가 이미 0인 픽셀을 건너뛰므로, 완전히 투명한 영역이 0이 아닌 값을 얻는 일은 없습니다.
매개변수
| 매개변수 | 설명 | 타입 | 기본값 |
|---|---|---|---|
img | 원본 이미지 | ImgSource | 필수 |
opacity | 불투명도, 0–1 | number | 필수 |
반환값
| 인자 | 설명 | 타입 |
|---|---|---|
canvas | 화면 밖 캔버스 | ImgSource |
getMatrix
2차원 가우스 가중치 행렬을 만듭니다. 가중치의 합이 1이 되도록 정규화됩니다.
정규화는 빠뜨릴 수 없습니다. 그러지 않으면 이 행렬로 합성곱할 때 이미지 전체의 밝기가 달라집니다. sigma의 기본값은 radius / 3입니다. 이 값이면 반지름에 이를 즈음 가우스 함수가 거의 0까지 잦아들어, 잘라 낸 데서 오는 오차를 무시해도 됩니다.
매개변수
| 매개변수 | 설명 | 타입 | 기본값 |
|---|---|---|---|
radius | 흐림 반지름 | number | 필수 |
sigma | 표준편차 | number | radius / 3 |
반환값
| 인자 | 설명 | 타입 |
|---|---|---|
matrix | (2r+1)²개짜리 평평한 배열. 행 우선이며 합은 1 | number[] |
타입
ts
type ImgSource = HTMLImageElement | HTMLCanvasElement;관련
- convertImageToBase64:
File→ base64 data URL - isImageSize: 이미지 크기 확인하기