캔버스를 바탕으로 한 이미지 도우미들입니다. 변환마다 data URL이 아니라 화면 밖 캔버스를 돌려주므로, 여럿을 이어 붙여도 단계마다 PNG로 부호화했다 다시 푸는 일이 없습니다.
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);
경로로 이미지를 불러옵니다. 디코딩이 끝나면 이행합니다.
| 매개변수 |
설명 |
타입 |
기본값 |
src |
이미지 경로 |
string |
필수 |
| 인자 |
설명 |
타입 |
promise |
불러온 이미지 요소 |
Promise<ImgSource> |
이미지의 모서리를 둥글게 잘라 냅니다.
| 매개변수 |
설명 |
타입 |
기본값 |
img |
원본 이미지 |
ImgSource |
필수 |
radius |
모서리 반지름 |
number |
필수 |
| 인자 |
설명 |
타입 |
canvas |
화면 밖 캔버스 |
ImgSource |
이미지 전체에 고른 불투명도를 입힙니다.
먼저 ctx.filter(GPU가 처리합니다)를 쓰고, 지원하지 않는 곳에서는 알파 채널을 픽셀마다 고쳐 쓰는 쪽으로 물러섭니다. 물러선 쪽은 알파가 이미 0인 픽셀을 건너뛰므로, 완전히 투명한 영역이 0이 아닌 값을 얻는 일은 없습니다.
| 매개변수 |
설명 |
타입 |
기본값 |
img |
원본 이미지 |
ImgSource |
필수 |
opacity |
불투명도, 0–1 |
number |
필수 |
| 인자 |
설명 |
타입 |
canvas |
화면 밖 캔버스 |
ImgSource |
2차원 가우스 가중치 행렬을 만듭니다. 가중치의 합이 1이 되도록 정규화됩니다.
정규화는 빠뜨릴 수 없습니다. 그러지 않으면 이 행렬로 합성곱할 때 이미지 전체의 밝기가 달라집니다. sigma의 기본값은 radius / 3입니다. 이 값이면 반지름에 이를 즈음 가우스 함수가 거의 0까지 잦아들어, 잘라 낸 데서 오는 오차를 무시해도 됩니다.
| 매개변수 |
설명 |
타입 |
기본값 |
radius |
흐림 반지름 |
number |
필수 |
sigma |
표준편차 |
number |
radius / 3 |
| 인자 |
설명 |
타입 |
matrix |
(2r+1)²개짜리 평평한 배열. 행 우선이며 합은 1 |
number[] |
type ImgSource = HTMLImageElement | HTMLCanvasElement;