html page snapshot -> html2canvas ( html 화면 이미지로 변환 )
DevOps/Web 2022. 7. 27. 17:23
내용
html page를 이미지 형태로 변환하여 저장 or 확인하는 기능
방법
html2canvas 사용
html
| <!-- jQuery --> <script src="~/plugins/jquery/jquery.min.js"></script> <!-- html2canvas --> <script src="~/plugins/html2canvas/html2canvas.min.js"></script> <div id='myCanvas' class='target' style='border:1px solid gray;width:200px;height:200px'> <div style='border:1px solid green;width:180px;height:250px'>Hello world</div> </div> |
javascript
saveAS 함수를 생성해두고 호출하는 방식
canvas_height, canvas_widtht 의 경우 설정하지 않아도 상관없으나, 옵션 설정 방법을 위해 작성됨
| function saveAs(uri, filename) { var link = document.createElement('a'); if (typeof link.download === 'string') { link.href = uri; link.download = filename; document.body.appendChild(link); link.click(); document.body.removeChild(link); } else { window.open(uri); } } function page_snapshot() { const canvas_height = document.querySelector('#myCanvas').offsetHeight const canvas_widtht = document.querySelector('#myCanvas').offsetWidth html2canvas(document.querySelector("#myCanvas"),{"width": canvas_widtht, "height": canvas_height}).then(canvas => { canvas_filename = 'myCanvas_img.jpeg' saveAS(canvas.toDataURL("image/jpeg"), canvas_filename); }); } |
참고
https://lts0606.tistory.com/270
'DevOps > Web' 카테고리의 다른 글
| html div page code copy ( html 페이지 코드 복사 ) (0) | 2022.07.27 |
|---|---|
| html rendered html page copy ( 소스가 변환되어 생성된 html 페이지 복사 ) (0) | 2022.07.27 |
| html <div>, <span> tag 개념과 차이점 (0) | 2022.07.27 |
| html div style display 속성을 사용하여 화면 출력/숨김 (0) | 2022.07.27 |
| javascript 프로그램 실행 지연(sleep) (0) | 2022.07.27 |
