Component 를 이미지로 추출

React
1

Reder 된 Component 를 이미지로 추출 (base64) 관련하여 질문 드립니다.

html2canvas 를 이용하고 있는데요, 폰트에 적용되는 스타일 (fontFamily, fontSize, fontWeight) 이 전부 날아가는 문제가 있습니다. 디버깅이 힘들어 이미지를 추출하는 다른 방법을 찾고 있는데요…

혹시 Component 를 이미지로 추출하는 좋은 방법이 있을까요?

2

이걸 사용해보세요~

3

감사합니다! 한번 시도해보고 피드백 하겠습니다.

4

웹폰트를 쓸경우 폰트가 다 불러와지기 전에 canvas를 그려서 폰트 적용이 안된건 아닌지도 확인해세요~

5

답변 감사드립니다.

6

링크해주신 dom-to-image 는 폰트문제 없이 (속도도 더 빠르네요) image 전환이 됩니다.
dom-to-image 도 코드를 뜯어보니 canvas 로 변환하는 방식인 듯 한데 html2canvas / dom-to-image 두개 패키지를 비교해봐야겠습니다.

1개의 좋아요