js剪切web网页成图片

Posted duguangyan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js剪切web网页成图片相关的知识,希望对你有一定的参考价值。

<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="">
            计算机天堂测试html5页面截图
            <br>jsjtt.com
        </div>
        
        <textArea id="textArea" col="20" rows="10" ></textArea>
        <input class="example1" type="button" value="button">
        生成界面如下:
    </body>
</html>











































以上是关于js剪切web网页成图片的主要内容,如果未能解决你的问题,请参考以下文章

HTML之网页的基本介绍

Web字体工具整理,网页图标字体以及使用方法整理

js中点击按钮将html页面导出成图片

网页html截屏转图片PhantomJS

IOS web网页图片上传问题

Python web简约表白网页源码分享,时光不老,我们不散!