이미지 혼합(Image Blending)은 두 이미지의 픽셀 값을 일정 비율로 섞어 하나의 새로운 이미지를 만드는 기법입니다. 가장 기본적인 형태인 50:50 혼합은 각 픽셀 값에 0.5씩 곱해 더하는 방식으로 구현할 수 있습니다.
동작 원리
HTML5 캔버스에서 이미지 혼합은 다음 순서로 진행됩니다.
- 첫 번째 이미지를 캔버스에 그린 뒤,
getImageData()로 픽셀 데이터를 추출합니다. - 같은 위치에 두 번째 이미지를 그리고 마찬가지로 픽셀 데이터를 추출합니다.
- 두 픽셀 배열의 각 값을 0.5씩 곱해 더하면 두 이미지가 정확히 절반씩 섞입니다.
- 결과 데이터를
putImageData()로 캔버스에 다시 그려 완성합니다.
전체 예제 코드
<img src="Tutorial1.jpg" id="img1">
<img src="Tutorial2.jpg" id="img2">
<p>혼합된 이미지<br>
<canvas id="canvas"></canvas></p>
<script>
window.onload = function () {
var myImg1 = document.getElementById('img1');
var myImg2 = document.getElementById('img2');
var myCanvas = document.getElementById("canvas");
var ctx = myCanvas.getContext("2d");
// 캔버스의 너비와 높이 설정
var w = myImg1.width;
var h = myImg1.height;
myCanvas.width = w;
myCanvas.height = h;
// 전체 픽셀 수 (픽셀당 RGBA 4개 채널)
var pixels = 4 * w * h;
ctx.drawImage(myImg1, 0, 0);
var image1 = ctx.getImageData(0, 0, w, h);
var imageData1 = image1.data;
ctx.drawImage(myImg2, 0, 0);
var image2 = ctx.getImageData(0, 0, w, h);
var imageData2 = image2.data;
// 각 픽셀을 50:50으로 혼합
while (pixels--) {
imageData1[pixels] = imageData1[pixels] * 0.5 + imageData2[pixels] * 0.5;
}
image1.data = imageData1;
ctx.putImageData(image1, 0, 0);
};
</script>코드 설명
1. 캔버스 크기 설정
첫 번째 이미지의 width와 height를 가져와 캔버스 크기와 동일하게 맞춥니다. 두 이미지의 크기가 같아야 픽셀이 정확히 대응되어 자연스럽게 혼합됩니다.
2. 픽셀 데이터 추출
getImageData(0, 0, w, h)는 지정 영역의 픽셀 정보를 RGBA 형식으로 반환합니다. 각 픽셀은 빨강(R), 초록(G), 파랑(B), 알파(A) 4개의 채널로 구성되므로 전체 배열 길이는 4 × w × h가 됩니다.
3. 픽셀 혼합
while 루프를 사용해 배열의 끝에서부터 처음까지 순회하며, 두 이미지의 대응되는 채널 값에 각각 0.5를 곱해 더합니다. 이렇게 하면 모든 픽셀이 두 이미지의 중간값이 되어 부드러운 혼합 효과가 나타납니다.
4. 결과 출력
마지막으로 putImageData()를 호출해 혼합된 픽셀 데이터를 캔버스 좌표 (0, 0) 위치에 그려 넣으면 최종 결과가 화면에 표시됩니다.
참고 사항
- 혼합 비율을 조절하고 싶다면 0.5 대신 다른 가중치를 사용하세요. 예를 들어 첫 번째 이미지에 0.7, 두 번째 이미지에 0.3을 곱하면 첫 번째 이미지가 더 강조됩니다.
- 이미지가 다른 도메인에 있을 경우 CORS 정책으로 인해
getImageData()호출이 보안 오류를 일으킬 수 있으므로, 같은 출처의 이미지를 사용하거나 서버에 적절한 CORS 헤더를 설정해야 합니다.