html2canvas와 CORS 문제 정리

html2canvas는 쉽게 말해, 웹 페이지의 div를 이미지로 변환해주는 라이브러리다.

변환 과정은 대략 이렇게 진행된다:

• div → canvas
• canvas → canvas.toDataURL()
• 데이터 URL로 변환된 이미지 생성

CORS 에러 발생 원인

근데 여기서 문제! 만약 div 안에 외부 도메인에서 불러온 이미지가 있다면, canvas가 이걸 “오염된 캔버스”라고 판단해서 CORS 오류를 발생시킨다.

그 결과, 변환된 이미지에서는 div는 잘 보이는데, 외부 이미지가 아예 안 보이는 상황이 벌어진다.

해결법

예를 들어, AWS S3에 저장된 이미지를 CloudFront를 통해 불러올 때라면, 응답 헤더에 CORS 설정을 추가해줘야 한다.

• CloudFront 동작 부분에 Access-Control-Allow-Origin: * 헤더를 추가
• Custom Header에 Origin을 *로 지정

이렇게 설정하고 나면, CORS 문제 없이 이미지를 정상적으로 불러올 수 있다.

div 안 자식 요소가 안 보이는 문제

또 다른 문제는, 변환 대상 div 내부의 자식 요소가 아예 안 보이는 경우다.

원인은 보통 부모 div에 overflow: hidden; 스타일이 걸려 있어서 그렇다.

부모 요소의 overflow: hidden;을 제거해주면, 자식 요소도 정상적으로 렌더링돼서 html2canvas 변환이 잘 된다.

요약하면, CORS 문제와 CSS 스타일 문제만 잘 체크하면 html2canvas 사용 시 이미지 변환은 매끄럽게 진행된다.