• 목록
  • 아래로
  • 위로
  • 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 372
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 마스터 23.01.14.02:23 4058
540 [Python] 소수점 자리수의 출력 - round() vs format() 1 이니스프리 이니스프리 20.02.15.11:53 31721
539 [Python] 파일을 읽어서 각 행을 리스트로 만드는 5가지 방법 이니스프리 이니스프리 18.11.25.22:16 23257
538 안티앨리어싱 옵션: 알고 쓰자. 5 image 하루살이 title: 황금 서버 (30일)하루살이 17.02.25.23:57 19427
537 GIF 파일의 용량을 줄여주는 사이트 - gifgifs.com image 이니스프리 이니스프리 17.10.09.12:57 17665
536 [Python] tqdm과 enumerate를 함께 사용하기 이니스프리 이니스프리 20.05.29.19:07 16334
535 [OpenCV] !_src.empty() in function 'cvtColor' 에러 해결방법 2 이니스프리 이니스프리 19.11.15.20:40 12722
534 윈도우 작업 스케줄러에서 특정 작업이 실행 안 되는 경우 해결방법 (배치파일 등의 상대경로 관련) 2 image 이니스프리 이니스프리 18.10.02.19:38 12314
533 [파이썬] Selenium에서 클릭이 안 될 때의 해결방법 이니스프리 이니스프리 19.10.27.22:20 10353
532 [Python] Requests에서 JSON 데이터를 POST 전송하는 방법 x2 이니스프리 이니스프리 21.08.22.08:16 9473
531 [Selenium] select box, check box, radio button 조작하기 이니스프리 이니스프리 20.06.27.15:47 8411
530 유튜브 iframe api의 autoplay 옵션과 관련하여 1 image 이니스프리 이니스프리 19.01.05.14:45 7530
529 윈도우 MAK 라이센스의 인증 가능횟수 확인방법 4 이니스프리 이니스프리 18.11.21.23:53 7480
528 일본 아마존에서 MP3 음원 구입하는 방법 5 image 제르엘 제르엘 19.12.23.01:28 7350
527 DB 설계하실 때 사용하면 좋을거 같은 사이트 공유합니다. 1 image JAVA JAVA 17.11.21.15:06 6983
526 국전 '빨간집' 위치 및 영업시간 등 정보 3 이니스프리 이니스프리 18.11.30.16:17 6724
525 제조사별 서버 원격관리 툴의 명칭 정리 (iLO, iDRAC, IPMI 등) 이니스프리 이니스프리 18.11.22.22:10 6412
524 해외직구시 카드 중복결제에 대하여 (아마존 등) 9 이니스프리 이니스프리 18.12.30.15:52 6106
523 텔레그램 비밀대화의 스크린캡쳐 방지기능 이니스프리 이니스프리 20.01.20.23:44 5847
522 크롬 원격 데스크톱 조작법 2 이니스프리 이니스프리 20.06.03.23:03 5822
521 윈도우의 CMD 창에서 Ctrl+V로 붙여넣기 (윈도우 10 / 윈도우 8 이하) 3 image 이니스프리 이니스프리 18.11.08.00:15 5747