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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

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

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

본문

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


// 캔버스 요소 가져오기
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;


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

댓글 0개

전체 931
개발자팁 내용 검색 JavaScript에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT