html2canvas网页转图片，页面截图
taotaoit jQuery 2021-04-13 1772 0
  1. 首页
  2. jQuery
  3. 正文:html2canvas网页转图片，页面截图
关于本站

“最难不过坚持”

本人承接扒站仿站，php网站维护，病毒查杀，网站编辑，网站改版，html制作

有需要网站维护，改版，病毒查杀，网站编辑，网站备案，html制作等相关的工作可以联系我。
本人有多年相关工作经验，也可提供免费咨询，交个朋友。
有需要探讨问题的朋友，也可以加我微信，共同探讨！
微信：15011482830 QQ:408917339

7440571 2655 39
分类目录
PHP 472
ThinkPHP 86
Mysql 65
jQuery 133
WampServer 15
DIV+CSS 112
DedeCMS 37
JavaScript 106
SQL 34
Sublime Text3 13
SQLServer 20
ASP 42
Bootstrap 18
IIS 25
AmazeUI 5
ThinkPHP5.1 243
Notepad++ 36
正则表达式 9
Layui 22
HTML标签 20
帝国cms 13
Linux 99
拼图Pintuer 6
Bootstrap4 19
kindeditor 11
HBuilderX 7
VSCode 61
微信开发 75
人人商城 15
Bootstrap5 33
宝塔 38
ThinkPHP6 72
百度小程序 5
Vue 124
Wordpress 20
Git 24
nodejs 28
React 5
zhtcms 3
其他 398
最新评论
https://jueru.net/
评 留言
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
文章标签更多
ThinkPHP (254)
Mysql (58)
DedeCms (33)
jQuery (67)
证件照 (1)
尺寸大小 (2)
背景颜色 (1)
setInc (4)
setDec (4)
onclick (5)
友情链接更多
超纯水设备
免费设计
海报设计
快递查询
html2canvas
打开边栏(ESC) 关闭边栏(ESC)

直接上代码

1，截图到页面 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>网页转图片</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <style>
        html,
        body {
            height: 100vh;
        }
        body {
            font-weight: 700;
            background-color: #f6f6f6;
        }
        .table-bordered>tbody>tr>td {
            border: 1px solid #ddddff;
        }
        .list {
            width: 95%;
            height: auto;
            margin: 10px auto;
            padding: 10px;
            background-color: #FFFFFF;
        }
        .list>.head>span {
            font-size: 16px;
            font-weight: 700;
            line-height: 30px;
            padding-left: 5px;
            border-left: 3px solid #ff4444;
            width: 100%;
            height: 30px;
        }
        .list>.cont {
            width: 100%;
            height: auto;
            padding: 5px 0;
            border-bottom: 1px solid #ddddff;
        }
        .list>.cont table {
            width: 100%;
        }
        .list>.cont table tr td {
            width: 30%;
        }
        tr.bg>td {
            color: #ffffff;
            background-color: #9999ff;
        }
        .tab {
            text-align: center;
        }
        .butn {
            text-align: center;
        }
        .hidd {
            display: none;
        }
        a.red {
            color: #ff4444;
            text-decoration: none;
            margin-top: 5px;
        }
        .buttons {
            color: #ffffff;
            text-align: center;
            padding: 3px 10px;
            margin: 5px 0;
            display: inline-block;
            background-color: #9999ff;

        }
        tr.bgt>td {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
    <div class="panel panel-default">
        <div class="panel-body">
            <a href="javascript:history.back()"><i class="fa fa-angle-left"
                    style="font-size: 16px;"></i>&nbsp;<span>返回</span></a>
        </div>
    </div>
    <h2><a href="index.html">网页转图片</a> | <a href="index-layer.html">网页转图片layer弹出框</a></h2>
    <div class="list">
        <div class="head">
            <span>所有学校统计</span>
            <!-- <a href="" class="pull-right red">详情 <i class="fa fa-angle-right"></i></a> -->
        </div>
        <div class="cont">
            <table>
                <tr>
                    <td><span>未送：1套</span></td>
                    <td><span>已送：1套</span></td>
                    <td><span>退款：1套</span></td>
                </tr>
                <tr>
                    <td><span>总计：2套</span></td>
                </tr>
            </table>
        </div>
        <div class="tab" id="jietu">
            <table class="table table-bordered">
                <tr class="bg">
                    <td>图书</td>
                    <td>未送</td>
                    <td>已送</td>
                </tr>
                <tbody>
                    <tr class="bgt">
                        <td>《书名》</td>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr class="bgt">
                        <td>《书名2》</td>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr class="bgt">
                        <td>《书名3》</td>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr class="bgt">
                        <td>《书名4》</td>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                </tbody>
            </table>
            <a href="javascript:void(0)" class="hishow red"><span>收起&nbsp;<i class="fa fa-angle-up"></i></span></a>
        </div>
        <div class="butn">
            <a href="javascript:void(0)" class="buttons">生成配送图</a> <a href="javascript:void(0)" class="hishow2 red" style="display: none;"><span>收起图片&nbsp;<i class="fa fa-angle-up"></i></span></a>
        </div>
        <div id="screenShotImg"></div>
    </div>

    <canvas></canvas>
    <script>
        $(document).ready(function () {
            $('.hishow').on('click', function () {
                var tab = $(this).parent('div.tab').children('table').children('tbody').children('tr:gt(3)');
                // console.log(tab);
                if (tab.eq(0).css('display') == "none") {
                    tab.show(300);
                    $(this).html('<span>收起&nbsp;<i class="fa fa-angle-up"></i></span>');
                } else {
                    tab.hide(300);
                    $(this).html('<span>展开&nbsp;<i class="fa fa-angle-down"></i></span>');
                }
            });
            $('.hishow2').on('click', function () {
                var tab = $('#screenShotImg');
                // console.log(tab);
                if (tab.css('display') == "none") {
                    tab.show(300);
                    $(this).html('<span>收起图片&nbsp;<i class="fa fa-angle-up"></i></span>');
                } else {
                    tab.hide(300);
                    $(this).html('<span>展开图片&nbsp;<i class="fa fa-angle-down"></i></span>');
                }
            });

            $('.buttons').on('click', function () {
                $('.hishow2').show();
                window.pageYOffset = 0;
                document.documentElement.scrollTop = 0
                document.body.scrollTop = 0
                html2canvas(document.getElementById('jietu')).then(function (canvas) {
                    var url = canvas.toDataURL();
                    document.querySelector('#screenShotImg').innerHTML = '<img width="100%" height="auto" src="' + url + '"/>';
                    // document.querySelector('#screenShotImg').style.width = width+"px";
                    // document.querySelector('#screenShotImg').style.height = height+"px";
                    //document.body.appendChild(canvas);
                    // var url = canvas.toDataURL();
                    // //console.log(canvas);
                    // layer.open({
                    //     title: '配送图',
                    //     type: 1,
                    //     skin: 'layui-layer-rim', //加上边框
                    //     area: ['80%', '80%'], //宽高
                    //     content: '<img width="100%" height="auto" src="'+url+'"/>'
                    // });
                });
            });
        });
    </script>
</body>

</html>
2，网页转图片layer弹出框 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>网页转图片layer弹出框</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <style>
        html,
        body {
            height: 100vh;
        }
        body {
            font-weight: 700;
            background-color: #f6f6f6;
        }
        .table-bordered>tbody>tr>td {
            border: 1px solid #ddddff;
        }
        .list {
            width: 95%;
            height: auto;
            margin: 10px auto;
            padding: 10px;
            background-color: #FFFFFF;
        }
        .list>.head>span {
            font-size: 16px;
            font-weight: 700;
            line-height: 30px;
            padding-left: 5px;
            border-left: 3px solid #ff4444;
            width: 100%;
            height: 30px;
        }
        .list>.cont {
            width: 100%;
            height: auto;
            padding: 5px 0;
            border-bottom: 1px solid #ddddff;
        }
        .list>.cont table {
            width: 100%;
        }
        .list>.cont table tr td {
            width: 30%;
        }
        tr.bg>td {
            color: #ffffff;
            background-color: #9999ff;
        }
        .tab {
            text-align: center;
        }
        .butn {
            text-align: center;
        }
        .hidd {
            display: none;
        }
        a.red {
            color: #ff4444;
            text-decoration: none;
            margin-top: 5px;
        }
        .buttons {
            color: #ffffff;
            text-align: center;
            padding: 3px 10px;
            margin: 5px 0;
            display: inline-block;
            background-color: #9999ff;
        }
        tr.bgt>td {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
    <div class="panel panel-default">
        <div class="panel-body">
            <a href="javascript:history.back()"><i class="fa fa-angle-left"
                    style="font-size: 16px;"></i>&nbsp;<span>返回</span></a>
        </div>
    </div>
<h2><a href="index.html">网页转图片</a> | <a href="index-layer.html">网页转图片layer弹出框</a></h2>
    <div class="list">
        <div class="head">
            <span>所有学校统计</span>
            <!-- <a href="" class="pull-right red">详情 <i class="fa fa-angle-right"></i></a> -->
        </div>
        <div class="cont">
            <table>
                <tr>
                    <td><span>未送：1套</span></td>
                    <td><span>已送：1套</span></td>
                    <td><span>退款：1套</span></td>
                </tr>
                <tr>
                    <td><span>总计：2套</span></td>
                </tr>
            </table>
        </div>
        <div class="tab" id="jietu">
            <table class="table table-bordered">
                <tr class="bg">
                    <td>图书</td>
                    <td>未送</td>
                    <td>已送</td>
                </tr>
                <tbody>
                    <tr class="bgt">
                        <td>《书名》</td>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr class="bgt">
                        <td>《书名2》</td>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr class="bgt">
                        <td>《书名3》</td>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr class="bgt">
                        <td>《书名4》</td>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                </tbody>
            </table>
            <a href="javascript:void(0)" class="hishow red"><span>收起&nbsp;<i class="fa fa-angle-up"></i></span></a>
        </div>
        <div class="butn">
            <a href="javascript:void(0)" class="buttons">生成配送图</a>
        </div>
    </div>

    <canvas></canvas>
    <script>
        $(document).ready(function () {
            $('.hishow').on('click', function () {
                var tab = $(this).parent('div.tab').children('table').children('tbody').children('tr:gt(3)');
                // console.log(tab);
                if (tab.eq(0).css('display') == "none") {
                    tab.show(300);
                    $(this).html('<span>收起&nbsp;<i class="fa fa-angle-up"></i></span>');
                } else {
                    tab.hide(300);
                    $(this).html('<span>展开&nbsp;<i class="fa fa-angle-down"></i></span>');
                }
            });
            $('.buttons').on('click', function () {
                $('.hishow2').show();
                window.pageYOffset = 0;
                document.documentElement.scrollTop = 0
                document.body.scrollTop = 0
                html2canvas(document.getElementById('jietu')).then(function (canvas) {
                    //document.body.appendChild(canvas);
                    var url = canvas.toDataURL();
                    // //console.log(canvas);
                    layer.open({
                        title: '配送图',
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['80%', '80%'], //宽高
                        content: '<img width="100%" height="auto" src="'+url+'"/>'
                    });
                });
            });
        });
    </script>
</body>

</html>

效果链接https://taotaoit.com/demo/?url=js/js-118/index

3，截图加背景代码 
$('.buttons').on('click', function () {
                $('.hishow2').show();
                window.pageYOffset = 0;
                document.documentElement.scrollTop = 0
                document.body.scrollTop = 0
                html2canvas(document.getElementById('jietu'), {
                    onrendered: function(canvas) {
                        var url = canvas.toDataURL();
                        document.querySelector('#screenShotImg').innerHTML = '<img width="100%" height="auto" src="' + url + '"/>';
                    },
                    background:'#000000',
                });
            });

另一种代码形式 

function comfirmSaveImg() {
            var copyDom = $("#jietu");//要保存的dom
            var width = copyDom.offsetWidth; //dom宽
            var height = copyDom.offsetHeight; //dom高
            var scale = 2; //放大倍数
            html2canvas(copyDom[0], {
                dpi: window.devicePixelRatio * 2,
                scale: scale,
                width: width,
                heigth: height,
                useCORS: true // 【重要】开启跨域配置
            }).then(function(canvas) {
                var url = canvas.toDataURL();
                document.querySelector('#screenShotImg').innerHTML = '<img width="100%" height="auto" src="' + url + '"/>';            
            });

        }

版权声明：本站原创文章，允许自由转载。

前一篇

jquery.validate根据条件判断表单字段必填校验
后一篇

html2canvas参数
相关推荐
TypeError: e.indexOf is not a function解决方法
jQuery | 2020-06-23 6797
This error might be caused by jquery event aliases like .load, .unload or .error deprecated since jQuery 1.8. Look for these aliases in your code and replace them with .o...
jquery出现Uncaught TypeError: $(...).prop is not a function问题
jQuery | 2019-08-23 6685
做全选功能的时候用到 var xz = $(this).prop("checked"); 提示： Uncaught TypeError: $(...).prop is not a function 应该是jquery版本过低造成的，更换高版本成功解决问题， jquery下载地址 http://www...
js，jquery获取不到动态创建的元素id的解决办法
jQuery | 2017-09-15 5102
jQuery中将数组转换成字符串join()和push()使用
jQuery | 2018-09-13 4792
ID选择器中有特殊字符，在jquery中用\\两个斜杠进行转义
jQuery | 2019-02-15 4737
jquery判断是否存在某个input
jQuery | 2020-01-09 3835
评论：0条
评论加载中...
发表评论
前一篇:
后一篇: