Safari issue #html2canvas dom-to-image-more

 

React.js 개발을 진행하며 아래 요구사항에 부합하는 라이브러리를 찾고 적용한 히스토리를 남긴다.

 

요구사항

• Dom Element를 이미지로 변환하고자 한다.
• 배경이 투명한 PNG로의 변환을 원한다.
• Chrome, Safari 등의 브라우저에서 호환이 되어야 한다.
• 이미지 생성 속도가 빠르고 화질 저하가 없어야 한다.

 

시도 1. dom-to-image-more (v3.5.0) 라이브러리 사용

결과는 실패였다. Chrome 브라우저에선 빠르고 정상적으로 작동되었으나, Safari, Firefox 브라우저에선 이미지가 정상적으로 생성되지 않음을 확인하였다. 확인해보니 Safari를 제대로 지원하고 있지 않더라.

 

시도 2. html2canvas 로 변경

결과는 실패였다. 역시 Chrome 브라우저에선 빠르고 정상적으로 작동되었으나, Safari에선 이미지 생성까지의 시간이 너무 오래 걸렸다. (브라우저 화면 크기 기준 수십초가 걸림)

 

시도 3. html-to-image 로 변경

결과는 성공했다. Chrome, Safari 모두 이미지가 정상적으로 생성되었으며 빠르기까지 했다.

 

 

앞으로 또 dom 객체를 이미지로 변환하여야 하는 일이 생긴다면 바로 html-to-image를 써야겠다.