갈피1 dom-to-image 작동 원리 갈피 프로젝트에서 캔버스로 만든 엘리먼트를 이미지화하는 데 dom-to-image 패키지를 썼다. 그 동안 어떤 원리로 이미지 화하는건지 알아봐야겠다고 생각만 하다가 드디어 정리해본다. 우선 깃허브 레포에는 다음과 같이 설명되어있다. 오리지널 DOM 노드를 재귀적으로 클론 노드와 서브노드의 스타일을 계산해서 상응하는 클론에 카피 + pseudo element 재생성(얘네는 클론되지 않으니까) 웹 폰트 임베드 모든 @font-face 선언 찾기 file URLs 파싱해서 다운로드 base64 인코드와 인라인 컨텐츠를 data: 로 가져오기 모든 CSS 규칙을 이어붙여서 하나의 엘리먼트에 얹기, 클론에 붙이기 이미지 임베드 에 이미지 url 임베드 background css 프로퍼티에 쓰인 이미지를 인라인으.. 2021. 5. 5. 이전 1 다음