IT/HTML|Script|PHP

html에서 특정 div영역을 이미지로 다운 받는 방법

하요 2024. 10. 7. 10:52
반응형

html을 만들다가보면 한번씩 해당 부분을 그대로 다운을 받고 싶을때가 있습니다.

 

물론 해당영역이 일시적으로 필요하거나한다면 캡처 프로그램을 써서 그부분만 잘라서 써도 좋겠지만

그게 아닌 사이트를 만들거나 하면서 주기적으로 해당 영역을 다운로드해야한다던가 했을 때의 방법을 정리해볼까 합니다.

 

 

html2canvas

html의 특정 영역을 이미지로 다운을 받기위해서는 html2canvas는 브라우저에서 HTML 요소를 캡처하여 캔버스로 변환하는 JavaScript 라이브러리를 사용해야 합니다. 이를 사용하면 DOM 요소를 기반으로 한 이미지를 쉽게 생성할 수 있습니다. 특히 캡처한 이미지를 PNG 형식으로 다운로드할 수 있어, 다양한 웹 애플리케이션에 활용할 수 있습니다.

 

구현방법

<html>
  <head>
      // 외부 CDN을 통한 라이브러리 추가
      <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.7/dist/html2canvas.min.js"></head>

  <body>
      <div id="capture" style="width: 400px; height: 300px; background-color: lightblue;">
          <p>다운로드할 이미지 영역</p>
      </div>
      <button id="download">이미지 다운로드</button>

  </script>
      <script>
          document.getElementById("download").addEventListener("click", function() {
              const element = document.getElementById("capture");

              html2canvas(element).then(canvas => {
                  const link = document.createElement('a');
                  link.download = 'image.png';    // 다운로드할 파일명
                  link.href = canvas.toDataURL(); // 캔버스를 이미지로 변환
                  link.click(); // 자동으로 다운로드 실행
              });
          });
      </script>
  </body>
</html>

 

 

html2canvas의 라이브러리를 직접 다운받아 코드를 작성하는 것도 좋지만, 

웹페이지의 성능을 향상시키고, 콘텐츠를 보다 안정적인 사용을 위해 아래의 cdn주소를 추가하여 사용하는 것을 권장한다.

 

<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.7/dist/html2canvas.min.js"></script>

 

이상으로 이 글을 통해 웹 페이지의 특정 요소를 이미지로 변환하고 다운로드하는 방법을 알게 되셨길 바랍니다.

반응형