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

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

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

 

GitHub: @Seia-Soto

Twitter: @Seia_Soto, @fluentAroma

Instagram: @seia.soto

Blog: typed.sh

Site: seia.io

댓글 0

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [중요] 프록시 서버 시스템 정비 안내 5 마스터 마스터 6일 전23:51 125
공지 서버의 백업 문제로 인해 임시로 호스팅 정책이 바뀝니다. 4 마스터 마스터 20.10.31.23:24 241
공지 출석부 모듈에 오류가 있습니다. 5 마스터 마스터 20.07.13.14:14 2289
461 [Python] 두 개의 리스트를 한꺼번에 for문으로 돌리기 이니스프리 이니스프리 3일 전20:30 20
460 [Python] 리스트의 순서를 유지하되 중복되는 요소를 제거하기 이니스프리 이니스프리 20.11.15.14:54 25
459 [Python] 네이버 블로그 크롤링할 때 PostList.nhn 관련 팁 (문자열에서 첫번째 행을 제거하기) 이니스프리 이니스프리 20.11.08.18:16 47
458 [Python] 문자열에서 파일명 또는 폴더명으로 시스템상 지원되는 글자를 제외하고 삭제하기 이니스프리 이니스프리 20.11.01.14:37 27
457 [Python] Pytube를 이용하여 유튜브 영상을 간단히 다운받는 법에 대한 설명 이니스프리 이니스프리 20.11.01.14:25 56
456 [Python] 특정 단어가 들어가는 폴더 또는 파일을 옮기기 이니스프리 이니스프리 20.11.01.14:14 24
455 [Python] 2개의 리스트를 딕셔너리로 변환하는 3가지 방법 이니스프리 이니스프리 20.10.25.15:34 43
454 [Python] HWP 파일 읽기 4 이니스프리 이니스프리 20.10.18.12:19 127
453 [Python] 디렉토리 내 0바이트 파일 찾기 이니스프리 이니스프리 20.10.11.11:19 32
452 [Python] 유튜브 영상을 PC에 다운받은 후 영상파일을 90도 rotation 하기 (youtube_dl + moviepy) 4 이니스프리 이니스프리 20.10.03.17:58 107
451 [Python] 폴더 및 하위 폴더 내의 파일에서 문자열을 일괄적으로 replace하는 스크립트 (ver 1.1) 이니스프리 이니스프리 20.10.02.11:58 21
450 [Amina] 그누보드 + 아미나 설치 방법 (처음 시작하는 분들을 위한 간단 매뉴얼) 이니스프리 이니스프리 20.10.01.16:48 93
JavaScript와 Canvas로 이미지의 배경값을 자동으로 산출하기 Seia Seia 20.09.12.06:37 36
448 React 그리고 Redux 쉽게 이해하기 image Seia Seia 20.09.12.06:31 48
447 [Python] 폴더의 모든 파일명을 랜덤하게 변경하기 이니스프리 이니스프리 20.08.30.15:06 120
446 [Selenium] 요소가 완전히 로드될 때까지 기다리기 이니스프리 이니스프리 20.08.23.20:22 34
445 [Selenium] 크롬 익스텐션 사용하기 1 이니스프리 이니스프리 20.08.23.19:35 60
444 [MoviePy] 폴더의 모든 MP4 파일을 적절한 크기의 GIF 파일로 변환하기 이니스프리 이니스프리 20.08.23.14:18 38
443 [Python] 확장자 확인 및 변경 이니스프리 이니스프리 20.08.23.12:17 148
442 [Python] 폴더 내 이미지의 height를 측정하여 height < n 미만인 파일을 삭제하기 이니스프리 이니스프리 20.08.13.20:08 43