WRZ博客

快乐阅读!

使用html2canvas实现html页面截图效果

2019-8-15 WRZ 代码

前言:看到wordpress 最近比较流行的 文章海报生成功能,就用php的DG库生成了一个 效果看文章底部 海报生成。

之后百度搜了一下有没有别的方法生成图片,于是就搜到了html2canvas.js 这个页面截图工具 也可以生成自己想要的图片 并记录下来

1.下载html2canvas.js  百度网盘  密码:xbh1

2.在html页面中加载JQ库和此插件

<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery2.2.4.min.js"></script>

3.简单的页面dome

<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="main">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
       <script type="text/javascript" src="js/jquery2.2.4.min.js"></script>
     <script type="text/javascript" src="js/html2canvas.js"></script>
        <script  type="text/javascript" >
        $(document).ready( function(){
                $(".example1").on("click", function(event) {
                        event.preventDefault();
                        html2canvas(document.getElementById('box'), {
                        allowTaint: true,
                        taintTest: false,
                        onrendered: function(canvas) {
                            canvas.id = "mycanvas";
                            //document.body.appendChild(canvas);
                            //生成base64图片数据
                            var dataUrl = canvas.toDataURL();
                            var newImg = document.createElement("img");
                            newImg.src =  dataUrl;
                            document.body.appendChild(newImg);
                        }
                    });
                });
        });
        </script>
    </head>
    <body>
        Hello!
        <div class="" id="box" style="background-color: #abc;">
            html5页面截图
        </div>
        <textArea id="textArea" col="20" rows="10" ></textArea>
        <input class="example1" type="button" value="截图">
        生成界面如下:
    </body>
</html>

4.更多的参数说明查看官网和github

官网:http://html2canvas.hertzen.com/

github:https://github.com/niklasvh/html2canvas

标签: 代码 教程

评论:

Lvtu
2019-08-20 16:57
没效果图没真相,差评!
WRZ
2019-08-20 17:00
@Lvtu:好吧....我既然不知道怎么回答了
Lvtu
2019-08-21 09:59
@WRZ:好吧,我看到效果图了,如果界面再美化一下就更完美了。
WRZ
2019-08-21 10:11
@Lvtu:好吧 (。•ˇ‸ˇ•。)
Lvtu
2019-08-21 10:14
@WRZ:这个表情不错,为啥我发评论没有表情用。。。
WRZ
2019-08-21 10:16
@Lvtu:前台 我没有添加 一会儿加上 !ヾ(´・ ・`。)ノ"
明月清风
2019-08-17 14:12
看看
左南
2019-08-17 01:20
谢谢分享.嘻嘻

发表评论: