前端插件html2canvas的截圖功能

時間 2020-03-04

標籤前端插件 html2canvas html canvas 截圖功能欄目 HTML 简体版

原文原文鏈接

代碼很簡單：引用jquery文件和html2canvas 兩個js。編寫以下代碼，就可完成截取當前可視區域的內容，截取內容由本身指定，我這裏演示截圖的是div中的內容。javascript

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script src="js/jquery-1.8.3.min.js"></script>
</head>
<script type="text/javascript">
    $(document).ready( function(){
        $("#examplePic").on("click", function(event) {
                 // 取消掉默認的事件
                event.preventDefault();    
                // editor 要截取的內容區域的id
                html2canvas(document.querySelector("#editor"),{
                //  是否容許跨域(默認是false)
                allowTaint: true,
                // 是否在渲染前測試圖片(默認是true)
                taintTest: false,
                onrendered: function(canvas) {
                    canvas.id = "mycanvas";
                    //生成base64圖片數據
                    var dataUrl = canvas.toDataURL();
                    // 下載到本地
                    var triggerDownload = $("<a>").attr("href", dataUrl).attr("download", "信息資源組織結構圖.png").appendTo("body");
                    triggerDownload[0].click();
                    triggerDownload.remove();
                }
            });
        });
    });
</script>
<body>
<input id="examplePic" type="button" value="保存圖片"/>
<div id="editor" style="text-align: center" data-options="region:'center'">測試截圖功能</div>
</body>
</html>