[Javascript] 화면 이미지(png)로 저장

html 화면 png로 저장

1. js파일 다운로드

• html2canvas : html 객체를 canvas로 변환해주는 라이브러리

html2canvas.js

0.36MB

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. 결과