html 화면 png로 저장
1. js파일 다운로드
- html2canvas : html 객체를 canvas로 변환해주는 라이브러리
2. html
- 저장영역 div id값 설정
<div class="card card-default pb-5">
<div class="save_btn"><a class="hover" href='javascript:void(0);' onclick="PrintDiv($('#bar_chart2'));">이미지로 저장</a></div> //저장 div id
<div id="bar_chart2" > //저장 div
<div class="card-header justify-content-center">
<h2 class="text-center">현재 습도 데이터</h2>
</div>
<div class="card-body" style="height: 300px;">
<canvas id="bar2"></canvas>
<div id='customLegend_humi' class='customLegend'></div>
</div>
</div>
</div>
- 다운받은 js 추가
<script src="/js/html2canvas.js"></script>
3. javascript 함수 작성
//이미지(png)로 다운로드
function PrintDiv(div){
div = div[0]
html2canvas(div).then(function(canvas){
var myImage = canvas.toDataURL();
downloadURI(myImage, "저장이미지이름.png")
});
}
function downloadURI(uri, name){
var link = document.createElement("a")
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
}
4. 실행
5. 결과
'개발일지 > Javascript & jQuery' 카테고리의 다른 글
[Javascript] table pagination (paging) (0) | 2020.06.10 |
---|---|
[Javascript] 시군구 select box (1) | 2020.05.22 |
[Javascript] bootstrap 버튼 클릭 시 tab 추가 (0) | 2020.05.22 |
[Javascript] MQTT 웹소켓 통신 (0) | 2020.04.02 |
[Javascript] 화면 PDF로 저장 (2) | 2020.03.19 |