html5 实现网页截屏页面生成图片(源代码)

最新推荐文章于 2024-07-03 10:28:21 发布

weixin_33890526

最新推荐文章于 2024-07-03 10:28:21 发布

阅读量571

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://segmentfault.com/a/1190000004654846

版权

<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
         
        <script  type="text/javascript" >
        $(document).ready( function(){
                $(".example1").on("click", function(event) {
                        event.preventDefault();
                        html2canvas(document.body, {
                        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="" style="background-color: #abc;">
            html5页面截图
        </div>
        <textArea id="textArea" col="20" rows="10" ></textArea>
        <input class="example1" type="button" value="截图">
        生成界面如下：
    </body>
</html>

weixin_33890526

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 实现网页截屏页面生成图片(源代码)

<!DOCTYPE html><html> <head> <meta name="layout" content="main"> <meta http-equiv="Content-Type" content="text/html; charse...
复制链接

扫一扫

html5 实现网页截屏 页面生成图片(源代码)

html5 实现网页截屏页面生成图片(源代码)