728x90
반응형
- [ 언어·프레임워크/Next.js ][Next.js] html2canvas 이미지 잘림 문제2023-12-08 15:26:001. html2canvas 이미지 잘림 문제 html을 이미지 파일로 저장하는 기능을 구현하기 위해 html2canvas 라이브러리를 이용했다. 편리하게 기능을 구현했고 작동했지만 html요소가 화면에 보이는 대로 캡처되지 않았다. 심지어 QR 코드 일부분은 [그림 1]과 같이 잘린 채로 저장되었다. 2. html-to-image 라이브러리로 교체 후 해결 html2canvas로 여러 시도를 해보았지만 효과를 보지 못했다. 그래서 html-to-image로 교체하였고 다행히도 깔끔하게 문제가 해결되었다. html-to-image의 경우 공식 문서의 코드를 그대로 가져와 사용했고 별다른 설정을 하지 않았음에도 화면에 보이는 대로 캡처되었다(그림 2 참조). 😉 html-to-image 공식문서 : http..
- [ 언어·프레임워크/React.js ][React.js] 네이버 지도 API, 지도 화면 PDF로 변환! 지도는 없고 빈 화면만 ㅠㅠ2023-06-06 14:26:061. 네이버 지도 API, 지도 화면 PDF로 변환했는데 빈 화면만?! 네이버 지도 API로 렌더링 된 지도가 포함된 페이지를 PDF 파일로 저장하는 기능을 적용했다. 사용한 모듈은 html2pdf와 html2canvas이다. 에러 없이 잘 저장되었으나 생성된 PDF 파일을 열었더니 [그림 1]과 같이 지도 영역에는 빈 화면만 있었다. ㅠㅠ 2. html을 이미지로 변환, 이미지를 PDF로 변환! html을 이미지로 만들고 그 이미지를 PDF로 만들면 되지 않을까하는 생각이 들었다. 그래서 npm에서 html-to-image와 jspdf를 찾아 설치하여 테스트를 진행했다. 설치한 라이브러리 리스트는 다음과 같다. "html-to-image": "^1.11.11", "jspdf": "^2.5.1", htm..
728x90
반응형