HTML 요소를 캡처하는 방법

12430 단어 webhtmlcssjavascript
다음 튜토리얼에서는 "버튼을 클릭하여 HTML 요소의 캡처 📸"를 만드는 방법을 배우게 되며 🎴이 다운로드됩니다.

시작하자👀



이 작업을 수행하기 위해 오픈 소스html2canvas 라이브러리를 사용합니다.
  • 먼저 요소를 캡처하기 위한 라이브러리를
    <head>
    html 문서의 태그

    • <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js">
</script>


    (다음 코드 예제 참조)

    <!DOCTYPE html>
<html>
 <head>
  <title>Capture an html element and save it as image</title>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"> 
  </script>
 </head>
 <body>
 </body>
</html>


  • 이제 다음을 포함합니다.
    <style>
    우리의
    <head>
    우리가 캡처하는 예제 요소의 스타일일 뿐인 태그

    • body {
    margin-top: 40px;
    font-family: Arial, Helvetica, sans-serif;
}

a:link:hover {
    text-decoration: none;
}

#capture-frame {
    width: 500px;
    margin: auto auto;
    display: flex;
    color: black;
    font-size: 16px;
    font-weight: bold;
    height: 300px;
    border: 4px solid black;
}

.screen-1 {
    background: red;
    width: 100%;
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid yellow;
}

.screen-1:hover, .screen-2:hover  {
    color: white;
}

.screen-2 {
    background: green;
    width: 100%;
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

h3 {
    text-align: center;
    font-weight: bold;
    padding-bottom: 100px;
    text-transform: uppercase;
}

.button {
    margin: 0 auto;
    text-align: center;
    padding: 50px 0;
}

.button button {
    border: 1px solid black;
    padding: 6px;
    font-weight: bold;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}

.button button:hover {
    background-color: lightblue;
}


  • 다음으로 내부 요소에 대한 html 구조를 추가합니다.
    body
    꼬리표

    • <h3>Capturing html element example
    <br />by using the 
    <a href="https://html2canvas.hertzen.com/">
     html2canvas 
    </a>
    library
</h3>

<div class="button">
    <button type="button" 
     onclick="saveAsImage()">Capture
    </button>
</div>

<div id="capture-frame">
    <div class="screen-1"><span>Element 1 </span></div>
    <div class="screen-2"><span>Element 2 </span></div>
</div>


  • 마지막으로 닫는 부분 위에 다음 스크립트를 추가해야 합니다.
    <body/>
    꼬리표

    • function saveAsImage() {
    const findEl = document.getElementById('capture-frame')
    html2canvas(findEl).then((canvas) => {
        const link = document.createElement('a')
        document.body.appendChild(link)
        link.download = "cmp-image.jpg"
        link.href = canvas.toDataURL()
        link.click()
        link.remove()
    })
}


    최종 참고 사항:



    현재 예제는 버튼 클릭으로 HTML 요소를 캡처하는 것을 보여주고 있지만 이것은 예를 들어 필요에 따라 사용자 정의할 수 있습니다(일부 조치 또는 간격을 기반으로 하는 이벤트 리스너).

    작업example 을 보거나 github repo 을 방문하십시오.


    나에 대한 질문이나 정보가 있으면 다음 qr 코드를 스캔하거나 클릭하여 연락할 수 있습니다.


    게시물은 Delovski.net Blog에 처음 게시되었습니다.
    우객망-검지오피스-균형이차수
    Leetcode637. BFS는 두 갈래 트리의 레이어당 평균 값을 계산합니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage