JS指定標籤範圍輸出成PNG圖片html2canvas

[Javascript] 使用html2canvas 截取網頁區塊功能 官網


1.載入需要的套件，Jquery + html2canvas

<script src="js/jquery1.12.4.min.js" type="text/javascript"></script>

<script src="js/html2canvas.min.js" type="text/javascript"></script>

2.JS觸發事件

        function png_export1(){

                    html2canvas($("#tables")[0], {

                        useCORS: true,

                        backgroundColor:null,

                        windowWidth: $("#tables")[0].scrollWidth,

                        windowHeight: $("#tables")[0].scrollHeight,

                    }).then(canvas => {

                        //輸出圖片到div2

                        let imgUri = canvas.toDataURL("image/png").replace("image/png","image/octet-stream",10);

                        document.querySelector("#div2").src = imgUri;

                        

                        // //直接下載

                        // a = document.createElement('a');//add canvas

                        // a.href = canvas.toDataURL("image/png", 0.92).replace("image/png", "image/octet-stream");//toDataURL將canvas轉成base64

                        // a.download = 'image.png';

                        // a.click();

                    });

        }

3.html介面設計

<table id="tables" border="1">

        <tr style="height: 20px">

            <td class="s4" dir="ltr">學習知能</td>

            <td class="s5" dir="ltr" colspan="2">熟工作相關專業知識，且具有業務需要之基本電腦作業能力，並能充分運用。</td>

            <td class="s6"><input type="radio" name="r10"/></td>

            <td class="s6"><input type="radio" name="r10"/></td>

            <td class="s6"><input type="radio" name="r10"/></td>

            <td class="s6"><input type="radio" name="r10"/></td>

            <td class="s6"><input type="radio" name="r10"/></td>

        </tr>

</taeble>

<button onclick="png_export1()">下載為 -> PNG</button>

<img id="div2" style="width: 100%;height: 60px;"></img>

觸發html2canvas事件後