div to png

div to png

간단하게 css로 div 타이틀을 만들고 png로 저장하는 기능
참고링크 : https://stackoverflow.com/questions/77666529/how-to-take-the-div-i-created-and-download-it-as-a-png

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
        
        <script>
            function handleDownload() {
            //const divElement = document.getElementById("myDiv");
            const divElement = this;
            const divId = divElement.id || "download"; // Fallback to 'download' if there's no id
            html2canvas(divElement, { backgroundColor: null }).then((canvas) => {
                const imgData = canvas.toDataURL("image/png");
                const link = document.createElement("a");
                link.href = imgData;
                link.download = `${divId}.png`;
                link.click();
            });
            }
        </script>
        <style>
            .round_box {
                border-radius: 10px;
                font-size: 15px;
                font-family: nanumgothic;
                background-color: #111;
                color: white;
                padding: 10px;
                display: inline-block;
                cursor: pointer;
            }
        </style>
        <title>Download Div as PNG</title>
    </head>

    <body>
    <div id="box01" class="round_box" onclick="handleDownload.call(this)">페놀프탈레인 용액</div>
    </body>
</html>