[ 언어·프레임워크/Next.js ]
[Next.js] html2canvas 이미지 잘림 문제
2023-12-08 15:26:00
1. html2canvas 이미지 잘림 문제 html을 이미지 파일로 저장하는 기능을 구현하기 위해 html2canvas 라이브러리를 이용했다. 편리하게 기능을 구현했고 작동했지만 html요소가 화면에 보이는 대로 캡처되지 않았다. 심지어 QR 코드 일부분은 [그림 1]과 같이 잘린 채로 저장되었다. 2. html-to-image 라이브러리로 교체 후 해결 html2canvas로 여러 시도를 해보았지만 효과를 보지 못했다. 그래서 html-to-image로 교체하였고 다행히도 깔끔하게 문제가 해결되었다. html-to-image의 경우 공식 문서의 코드를 그대로 가져와 사용했고 별다른 설정을 하지 않았음에도 화면에 보이는 대로 캡처되었다(그림 2 참조). 😉 html-to-image 공식문서 : http..