[JavaScript] 使用html2canvas，擷取網頁區塊截圖

官網：html2canvas




1. 把你要截圖的東西包在div
2. 放一個下載截圖的Button
3. 載入html2canvas的js
4. 寫Button onclick觸發的function
5. 完成啦~~~當按下Buttonc後，瀏覽器會自動下載圖片


Example ↓

HTML:

<div id="chart3">
擷取區塊
</div>

<button id="btnSave" class="btn btn-danger" onclick="screenshot()">Download screenshot</button>

JavaScript:

<script  src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script type="text/javascript">    
    function screenshot(){

        html2canvas(document.getElementById('chart3')).then(function(canvas) {
            document.body.appendChild(canvas);
            var a = document.createElement('a');
            a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
            a.download = 'image.jpg';
            a.click();
        });
    }
</script> 

JavaScript ref: Take screenshot of webpage with Html2Canvas