[Next.js] html2canvas 이미지 잘림 문제

1. html2canvas 이미지 잘림 문제

html을 이미지 파일로 저장하는 기능을 구현하기 위해 html2canvas 라이브러리를 이용했다. 편리하게 기능을 구현했고 작동했지만 html요소가 화면에 보이는 대로 캡처되지 않았다. 심지어 QR 코드 일부분은 [그림 1]과 같이 잘린 채로 저장되었다.

[그림 1] 화면에서 보는 것과 다르게 캡쳐된 이미지

2. html-to-image 라이브러리로 교체 후 해결

html2canvas로 여러 시도를 해보았지만 효과를 보지 못했다. 그래서 html-to-image로 교체하였고 다행히도 깔끔하게 문제가 해결되었다. html-to-image의 경우 공식 문서의 코드를 그대로 가져와 사용했고 별다른 설정을 하지 않았음에도 화면에 보이는 대로 캡처되었다(그림 2 참조).

[그림 2] html-to-image로 화면과 동일하게 캡쳐함

 

😉 html-to-image 공식문서 : https://www.npmjs.com/package/html-to-image#react