• 목록
  • 아래로
  • 위로
  • 0
  • Seia
  • 조회 수 22

최근 여러가지 웹 개발을 하면서 한 가지 문제 상황에 봉착하였습니다. 주어진 이미지를 온전히 보여주면서 배경색 또한 자동으로 적합한 색으로 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 속성을 먹였습니다.

작성자
Seia 31 Lv. (77%) 80770/81920EXP

Node.JS와 Rust를 주로 공부하고 있으며 React로 여러가지 앱을 만지작 거립니다. 알고리즘보다는 비공식적인(?) 개발을 좋아합니다.

 

GitHub: @Seia-Soto

Twitter: @Seia_Soto, @fluentAroma

Instagram: @seia.soto

Blog: typed.sh

Site: seia.io

댓글 0

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 Study For Us 호스팅 홈페이지 리뉴얼 안내 16 슬레이브 슬레이브 20.09.02.01:35 387
공지 출석부 모듈에 오류가 있습니다. 5 슬레이브 슬레이브 20.07.13.14:14 1533
JavaScript와 Canvas로 이미지의 배경값을 자동으로 산출하기 Seia Seia 20.09.12.06:37 22
448 React 그리고 Redux 쉽게 이해하기 image Seia Seia 20.09.12.06:31 35
447 [Python] 폴더의 모든 파일명을 랜덤하게 변경하기 이니스프리 이니스프리 20.08.30.15:06 32
446 [Selenium] 요소가 완전히 로드될 때까지 기다리기 이니스프리 이니스프리 20.08.23.20:22 26
445 [Selenium] 크롬 익스텐션 사용하기 이니스프리 이니스프리 20.08.23.19:35 27
444 [MoviePy] 폴더의 모든 MP4 파일을 적절한 크기의 GIF 파일로 변환하기 이니스프리 이니스프리 20.08.23.14:18 29
443 [Python] 확장자 확인 및 변경 이니스프리 이니스프리 20.08.23.12:17 12
442 [Python] 폴더 내 이미지의 height를 측정하여 height < n 미만인 파일을 삭제하기 이니스프리 이니스프리 20.08.13.20:08 34
441 glob.glob()를 이용하여 recursive하게 하위 폴더까지 모든 파일과 디렉토리를 검색하기 이니스프리 이니스프리 20.08.12.16:22 39
440 [윈도우] Powershell을 특정 경로에서 여는 바로가기 만들기 이니스프리 이니스프리 20.08.10.17:12 56
439 [Python] BeautifulSoup에서 속성이 정확히 매칭되는 요소만 찾기 이니스프리 이니스프리 20.08.09.13:34 49
438 [Python] Ubuntu에서 파이썬이 설치된 디렉토리를 간단히 확인하는 방법 2 이니스프리 이니스프리 20.08.03.22:58 38
437 [Python] 원하는 URL로 크롬 창 열기 이니스프리 이니스프리 20.07.16.14:01 89
436 [Python] 현재시각에 따라 오전/오후 반환 이니스프리 이니스프리 20.07.16.13:58 49
435 [Python] Wildcard match 이니스프리 이니스프리 20.07.13.17:15 36
434 [Python] 디렉토리 내의 파일명을 시간순으로 정렬하기 이니스프리 이니스프리 20.07.13.15:57 36
433 [Python] 폴더 내 모든 엑셀 파일의 작성자를 출력하기 3 이니스프리 이니스프리 20.07.06.20:33 98
432 [PIL] 이미지 좌우반전 이니스프리 이니스프리 20.07.04.15:22 53
431 MS Office 제품군 명칭 변경 image 이니스프리 이니스프리 20.07.02.18:05 65
430 [정규식] 문자열에 괄호 넣기 이니스프리 이니스프리 20.07.01.18:37 56