2023.06.01 [color-thief-react]

📖오늘 배운  것

이미지에서 색상 추출하는 라이브러리 사용하기

메인페이지 콘텐츠 추천에서 각 책에서 대표 색을 뽑은 다음 배경색으로 사용해야 했다. 그래서 이전에 사용하려다가 실패했던 color-thief-react 라이브러리를 도입하기도 하였다.

라이브러리 자체로는 color-thief 가 오리지널이지만 해당 라이브러리를 type 지원이 안되는 것 같아서 color-thief-react로 사용하기로 하였다.

마지막 업데이트도 늦고 그렇게 많이 사용하는 라이브러리는 아니라 차선책을 찾아봤지만 생각보다 관련 라이브러리가 없어서… 사용하기로 결정! 나중에 내가 만들어볼 수 있음 좋을 것 같다.

import { useColor } from 'color-thief-react';

const imgSrc =
    '<https://live.staticflickr.com/65535/50237066832_72c7290c5c_c.jpg>';

const { data, error } = useColor(imgSrc, 'hex');

사용 방법은 아주 간단한데 cors에러로 애를 먹었다. 해당 라이브러리에서 canvas로 이미지 색을 추출하는 것 같은데 image를 canvas로 사용할 때 원본을 변경할 여지가 있으면 cors 에러가 나는 경우가 있다는 것을 처음 알았다.

하지만

DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

이렇게 securityError가 발생하는 것을 발견하고 찾아보니 crossOrigin이라는 옵션이 있었다. 해당 옵션을 붙여서 해결이 되었는데 문제는 저 이미지 주소는 공식 데모버전에 있는 이미지이고 내가 임의의 이미지를 넣으면 cors 에러가 발생하였다.

따라서 cors문제는 서버 api 연결하고도 발생하면 그 때 해결해야할 듯하고 일단은 로컬에서 이미지를 불러오는 방식으로 수정하였다.

 

 

 

💭배운 점

 

로컬이미지로 넣었을 때 성공해서 기뻤다! 이전 프로젝트에서도 도입하려다가 실패했어서 이번엔 꼭 성공하고 싶었는데 다행이다... 서버에서 이미지를 받아온 후에도 문제없이 작동하면 좋을텐데!!!

라이브러리 업데이트가 너무 오래되면 아무래도 사용하기 조금 꺼려지는데 이번 경우엔 선택지가 많지 않아서 아쉬웠다 ㅠ 되게 필요한 기능아닌가 싶은데 생각보다 라이브러리가 없어서 신기했고 color-thief 에는 typescript를 어떤 식으로 사용해야할지 감이 안와서 아쉬웠다. 찾아봐도 자료가 많이 없어서 더 힘들었던 것 같다 ㅠ 그래도 일단은 해결됐으니!! 서버에서 받아온 이미지도 cors 에러 없이 할 수 있었으면 좋겠다!