자바스크립트 기반으로 HTML Canvas에 이미지를 불러들여 테두리색입히기

자바스크립트 기반으로 HTML Canvas에 이미지를 그리고 매끄러운 아웃라인을 그리는 예시 코드입니다. 이 코드는 캔버스의 `ctx` 컨텍스트를 사용하며, 이미지 파일 경로를 `imagePath` 변수에 설정해주어야 합니다.

[code]
// 캔버스 요소 가져오기
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 이미지 로드 및 그리기
const image = new Image();
image.onload = function() {
// 캔버스에 이미지 그리기
ctx.drawImage(image, 0, 0);

// 이미지 데이터 가져오기
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

// 픽셀 단위로 반복하면서 아웃라인 그리기
for (let i = 0; i < data.length; i += 4) {
const alpha = data[i + 3];

if (alpha !== 0) {
const x = (i / 4) % canvas.width;
const y = Math.floor(i / (4 * canvas.width));

// 일정 거리 내에 매끄러운 아웃라인 그리기
const outlineColor = [255, 0, 255]; // Magenta 색상
const outlineRadius = 5; // 아웃라인 반지름

for (let j = -outlineRadius; j <= outlineRadius; j++) {
for (let k = -outlineRadius; k <= outlineRadius; k++) {
const offsetX = x + j;
const offsetY = y + k;

if (offsetX >= 0 && offsetX < canvas.width && offsetY >= 0 && offsetY < canvas.height) {
const offsetIndex = (offsetY * canvas.width + offsetX) * 4;
const distance = Math.sqrt(j * j + k * k);
const opacity = 1 - distance / outlineRadius;

// 매끄러운 아웃라인 그리기
data[offsetIndex] = outlineColor[0];
data[offsetIndex + 1] = outlineColor[1];
data[offsetIndex + 2] = outlineColor[2];
data[offsetIndex + 3] = Math.round(opacity * alpha);
}
}
}
}
}

// 변경된 이미지 데이터로 캔버스에 다시 그리기
ctx.putImageData(imageData, 0, 0);
};

// 이미지 파일 경로 설정
const imagePath = 'image.png';

// 이미지 로드 시작
image.src = imagePath;
[/code]

위의 코드는 캔버스 요소(`<canvas>`)를 가져와서 `ctx` 컨텍스트를 사용하여 이미지를 그립니다. 이후 `getImageData()` 메소드를 사용하여 이미지 데이터를 가져오고, 픽셀 단위로 반복하면서 알파 값을 확인하여 불투명한 영역에 아웃라인을 그리게 됩니다. 매끄러운 아웃라인을 그리기 위해 지정한 일정 거리 내의 픽셀들에 Magenta 색상을 부여하고, 아웃라인의 투명도를 조절하여 매끄럽게 그려줍니다.