前端插件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>