HTML5 캔버스(Canvas)에 그려진 이미지의 색상을 변경하는 방법

HTML5 캔버스(Canvas) 요소에 그려진 이미지의 색상을 변경하려면 drawImage() 메서드로 이미지를 캔버스에 그린 후, 픽셀 단위로 색상 값을 조작하면 됩니다.

핵심 원리

캔버스에서 제공하는 getImageData() 메서드를 사용하면 이미지의 모든 픽셀 데이터(RGBA 값)를 가져올 수 있습니다. 각 픽셀은 빨강(R), 초록(G), 파랑(B), 알파(A) 네 개의 값으로 구성되어 있으며, 이 값들을 비트 OR 연산(|)으로 조정한 뒤 putImageData()로 다시 캔버스에 적용하면 원하는 색조의 이미지를 얻을 수 있습니다.

구현 코드

다음 코드는 캔버스에 그려진 이미지의 색상을 변경하는 함수입니다.

function display(img, red, gr, bl) { // 이미지 색상을 변경하는 함수
  var canvas1 = document.createElement('canvas'); // 캔버스 요소 초기화

  canvas1.width = img.width;   // 캔버스 너비 초기화
  canvas1.height = img.height; // 캔버스 높이 초기화

  var ctx1 = canvas1.getContext('2d');
  ctx1.drawImage(img, 0, 0); // 캔버스에 원본 이미지 그리기

  var myImg = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
  for (var t = 0; t < myImg.data.length; t += 4) {
    myImg.data[t]     = red | myImg.data[t];     // 빨강(R) 채널 조정
    myImg.data[t + 1] = gr  | myImg.data[t + 1]; // 초록(G) 채널 조정
    myImg.data[t + 2] = bl  | myImg.data[t + 2]; // 파랑(B) 채널 조정
  }
  ctx1.putImageData(myImg, 0, 0); // 수정된 이미지 데이터를 컨텍스트에 반영
  return canvas1;
}

코드 동작 방식

1. 새 캔버스 생성 및 초기화

document.createElement('canvas')로 새 캔버스 요소를 만들고, 원본 이미지와 동일한 크기로 너비와 높이를 설정합니다.

2. 이미지 그리기

drawImage() 메서드를 사용해 좌표 (0, 0) 위치에 원본 이미지를 캔버스에 그립니다.

3. 픽셀 데이터 추출 및 색상 변경

getImageData()로 전체 픽셀 데이터를 가져온 후, 반복문에서 인덱스를 4씩 증가시키며 각 픽셀의 R, G, B 값을 비트 OR 연산으로 변경합니다. 알파(A) 값은 그대로 유지됩니다.

4. 결과 반영

putImageData() 메서드로 수정된 픽셀 데이터를 캔버스 컨텍스트에 다시 적용하여 색상이 변경된 이미지를 완성합니다.

이 방식을 활용하면 필터 효과, 색조 변환, 이미지 틴팅(tinting) 등 다양한 이미지 처리 기능을 자바스크립트만으로 구현할 수 있습니다.