JavaScript와 Canvas로 이미지의 배경값을 자동으로 산출하기

최근 여러가지 웹 개발을 하면서 한 가지 문제 상황에 봉착하였습니다. 주어진 이미지를 온전히 보여주면서 배경색 또한 자동으로 적합한 색으로 fill하도록 만들수는 없을까? 저의 경우에는 주어진 이미지에 여백이 충분히 있었기 때문에 2차원 캔버스 이미지에서 1x1 지점의 픽셀 데이터를 추출하는 식으로 이를 구현하였습니다. 캔버스 API의 경우에는 RGBA 값을 반환하니 충분히 시도해볼만 합니다.

// <CODE START> part.js

const context = canvas.getContext('2d')

const image = new Image()

image.src = props.image
image.onload = () => {
  // NOTE: Draw image to canvas context.
  context.drawImage(image, 0, 0)
  // NOTE: Hide image from the front.
  image.style.display = 'none'

  const pexel = context.getImageData(0, 0, 1, 1)
  const data = pexel.data

  setBackgroundColor('rgba(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')')
}

// <CODE END>

아직 적합한 Adaptive color 알고리즘은 구현하는 중에 있는데 생각보다 어렵네요... 참고로 canvas의 width와 height같은 경우는 동일하게 1x1만 필요하기 때문에 1x1로 설정하고 display: none 속성을 먹였습니다.