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

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

GitHub에서 seia-soto로 활동 중입니다.

댓글 0

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 마스터 24.02.11.17:21 377
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 마스터 23.01.14.02:23 4061
480 [Python] 파이썬으로 평균을 구하는 두 가지 방법 이니스프리 이니스프리 21.03.13.21:58 166
479 [Python] 동영상 파일의 재생시간 길이를 구하기 (OpenCV vs MoviePy) 이니스프리 이니스프리 21.03.12.22:33 4595
478 [Python] Youtube_dl 사용시 주의할 점 이니스프리 이니스프리 21.03.12.22:14 128
477 [Python] Youtube Data API를 이용하여 특정 채널의 모든 비디오 링크를 얻는 함수 이니스프리 이니스프리 21.03.12.22:05 384
476 php8.0 대응 라이믹스 오류 해결법 NUBE title: 크롬NUBE 21.03.08.11:39 264
475 [Python] 동영상 파일의 포맷 변환 - FFmpy 모듈 이니스프리 이니스프리 21.03.07.12:14 237
474 [Python] glob.glob() 정렬 방법 정리! 이니스프리 이니스프리 21.03.07.00:49 1486
473 [Python] 윈도우에서 pyaudio 모듈 설치 에러 해결하는 방법 3 이니스프리 이니스프리 21.03.06.15:11 519
472 외국어(인도-유럽어족) 학습에 관하여 4 이니스프리 이니스프리 21.02.21.00:01 122
471 ionicons.com - 오픈 소스 아이콘 4 이니스프리 이니스프리 21.02.14.18:59 304
470 나리야 익명보드 및 내 글 알림 관련 Q&A image 이니스프리 이니스프리 21.02.14.17:30 104
469 [Python] 크롤링한 bytes를 string으로 변환 이니스프리 이니스프리 21.02.14.15:32 109
468 [Python] BeautifulSoup에서 class명에 공백이 있을 때 검색 방법 이니스프리 이니스프리 21.02.13.00:26 1981
467 [Python] Instalooter 에러 발생 시 대처법 1 이니스프리 이니스프리 21.01.31.13:37 215
466 [Windows] 날짜 및 시각을 폴더명으로 하는 백업 Batch 파일 - 파일 버저닝 용도 2 이니스프리 이니스프리 21.01.25.22:14 902
465 [Python] json.load()와 json.loads()의 차이 2 이니스프리 이니스프리 21.01.24.13:15 493
464 [Python] 전기차 충전소 조회 사이트 크롤링 이니스프리 이니스프리 21.01.10.15:10 225
463 [React] React-Router BrowserRouter를 사용한 앱을 SFU 호스팅에 배포하는 방법 1 Ruwaku 20.12.18.15:41 313
462 로지텍 G304 , G403 마우스 카일저소음 스위치(버튼) 교체!! 2 image 자뻑보이 자뻑보이 20.12.02.20:23 1472
461 [Python] 두 개의 리스트를 한꺼번에 for문으로 돌리기 1 이니스프리 이니스프리 20.11.23.20:30 338