div 영역만 이미지로 저장 스크립트 html2cnvas

특정 div 일부만 이미지로 저장하고 싶다면 html2cnvas  스크립트로 가능하다. pdf 로 다운로드는 구현이 조금 까다롭지만 스크립트로는 아래와 같이 코드 몇줄만 적으면 다운로드 파일 이름도 정의할 수 있고 jpg 파일로 저장 할수 있다.

<div class="com_btn_wrap right"> 
  <button class="com_btn l point btn_download" type="button" onclick="downloadImage()"><i class="icon svg_icon before icon_download white"></i>다운로드</button>
</div>

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
  function downloadImage() {
    // Get the target div
    var divToCapture = document.getElementById('mindScoreBody');

    // Use html2canvas to capture the div as an image
    html2canvas(divToCapture).then(function (canvas) {
      // Convert the canvas to a data URL
      var imageData = canvas.toDataURL('image/jpeg');

      // Create a link element and trigger a download
      var link = document.createElement('a');
      link.href = imageData;
      link.download = 'output.jpg';
      link.click();
    });
  }
</script>