JavaScript로 여러 이미지 합치기
웹 개발을 하다 보면 두 개 이상의 이미지를 겹치거나 합쳐서 하나의 이미지로 만들어야 하는 경우가 있습니다. JavaScript에서는 Canvas API를 활용하면 별도의 라이브러리나 서버 작업 없이 브라우저에서 바로 이미지를 합성할 수 있습니다.
핵심 원리는 간단합니다. 먼저 <canvas> 요소에 2D 드로잉 컨텍스트를 가져온 뒤, drawImage() 메서드로 첫 번째 이미지를 그리고, globalAlpha 속성으로 투명도를 조절하며 두 번째 이미지를 같은 위치에 겹쳐 그리는 방식입니다.
아래는 두 개의 이미지를 반투명하게 겹쳐 하나로 합치는 전체 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이미지 합성 예제</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>여러 이미지를 하나로 합치기</h1>
<img class="image" src="https://i.picsum.photos/id/845/250/250.jpg?hmac=2l7QArh4UKul2qF-JvTjaBu3-WF2KpKBgpBALmFoxWY"/>
<img class="image" src="https://i.picsum.photos/id/925/250/250.jpg?hmac=twWJdaKT46cPk1aNvB7aKdiLZoQzvzu5VW85OEUO4ys"/>
<canvas class="result"></canvas>
<br />
<button class="Btn">합치기</button>
<h3>위 버튼을 클릭하면 두 이미지가 하나로 합쳐집니다</h3>
<script>
let imgEle1 = document.querySelectorAll(".image")[0];
let imgEle2 = document.querySelectorAll(".image")[1];
let resEle = document.querySelector(".result");
var context = resEle.getContext("2d");
let BtnEle = document.querySelector(".Btn");
BtnEle.addEventListener("click", () => {
resEle.width = imgEle1.width;
resEle.height = imgEle1.height;
context.globalAlpha = 1.0;
context.drawImage(imgEle1, 0, 0);
context.globalAlpha = 0.5;
context.drawImage(imgEle2, 0, 0);
});
</script>
</body>
</html>코드 설명
- 이미지 요소 선택:
document.querySelectorAll(".image")로 화면에 표시된 두 개의<img>요소를 가져옵니다. - 캔버스 크기 설정: 버튼 클릭 시 캔버스의
width와height를 첫 번째 이미지 크기에 맞춰 지정합니다. - 첫 번째 이미지 그리기:
globalAlpha를1.0(불투명)으로 설정한 상태에서drawImage(imgEle1, 0, 0)으로 좌표 (0, 0) 위치에 첫 번째 이미지를 그립니다. - 두 번째 이미지 겹치기:
globalAlpha를0.5(50% 투명)로 낮춘 후 두 번째 이미지를 같은 위치에 그려 자연스럽게 블렌딩 효과를 줍니다.
실행 결과
페이지를 열면 원본 이미지 두 장과 빈 캔버스, 그리고 버튼이 표시됩니다.
'합치기' 버튼을 클릭하면 다음과 같이 두 이미지가 반투명하게 겹쳐진 결과가 캔버스에 나타납니다.
참고 사항
이미지가 외부 도메인에서 로드되는 경우, 캔버스 오염(cross-origin) 문제로 인해 toDataURL() 등으로 결과 이미지를 추출할 때 제한이 있을 수 있습니다. 이 경우 이미지 요소에 crossorigin="anonymous" 속성을 추가하고 서버에서 CORS 헤더를 허용해 주어야 합니다. 또한 세로 나열 대신 가로·세로 오프셋 값을 조정하면 이미지를 나란히 붙이는 방식으로도 응용할 수 있습니다.