Html2canvas实现截背景图

最新推荐文章于 2024-08-07 03:42:29 发布

미 칠 것 같다

最新推荐文章于 2024-08-07 03:42:29 发布

阅读量4.8k

点赞数 1

分类专栏： C#

本文链接：https://blog.csdn.net/qq_42331027/article/details/89960776

版权

C# 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

Html2canvas该脚本允许您直接在用户浏览器上截取网页或部分网页的“屏幕截图”。屏幕截图基于DOM，因此它可能不是真实表示的100％准确，因为它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

以下代码我只是简单地实验一下功能，更多详情可去官网学习http://html2canvas.hertzen.com/

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>html2canvas</title>
    <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        html,body{
            margin: 0;
            padding: 0;
            height:100%;
            overflow:hidden;
        }
        #img{
            width:100%;
            height:100%;
            background: url('../../Content/images/MySelfPicture/248914-106.jpg') no-repeat fixed center !important;
            background-attachment: fixed !important;
            background-size: 100% 100% !important;
            background-position: center bottom;
        }
    </style>
</head>
<body>
    <button class="btn" onclick="btn()">截 图</button>
    <div id="img"></div>
    <div class="bg-img" style="display: none"></div>
    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-2.0.3.min.js"></script>
    <script src="~/Content/layer/layer.js"></script>
    <script src="~/Content/canvas/html2canvas.js"></script>
    <script>
        function btn() {
            $(".bg-img").empty();//每次先清空canva
            layer.open({//调用layer弹窗
                type: 1,
                area: ['80%', '80%'],
                shade: 0.6,
                title: false,
                anim: 7,
                offset: ['10%', '10%'],
                maxmin: false,
                closeBtn: 1,
                move: false,
                content: $(".bg-img"),
                zIndex: layer.zIndex,
            });
            html2canvas(document.getElementById('img'), {//用法
                onrendered: function (canvas) {
                    $(".bg-img").append(canvas);
                },
            });
        }
    </script>
</body>
</html>

实现效果：