html2canvas 网页截图下载上传

最新推荐文章于 2021-05-30 23:33:52 发布

weixin_30337251

最新推荐文章于 2021-05-30 23:33:52 发布

阅读量115

点赞数

原文链接：http://www.cnblogs.com/i-blog/p/4798200.html

版权

利用html2canvas插件对网页截图并下载和上传图片。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--此网页演示了html2canvas网页截图下载 -->

<head>
    <!-- base.js实际上是jquery库,html2canvas.js是html2canvas自带的js库 -->
    <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
    <script type="text/javascript" src="http://www.boolaw.com/tpl/default/js/jquery-1.8.3.min.js"></script>
    <title>html2canvas网页截图</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!--需要注意的是,这里一定要等待js库和网页加载完毕后再执行函数  -->
    <!-- html2canvas()中,第一个参数是要截图的Dom对象，第二个参数时渲染完成后回调的canvas对象。  -->
    <script type="text/javascript">
        $(function(){    
                print();
            });
            function print(){    
                html2canvas( $("#canv") ,{          
                    onrendered: function(canvas){
                        $('#down_button').attr( 'href' , canvas.toDataURL() ) ;
                        $('#down_button').attr( 'download' , 'myjobdeer.png' ) ;
                        //$('#down_button').css('display','inline-block');
                        var html_canvas = canvas.toDataURL();
                        $.post('', {order_id:1,type_id:2,html_canvas:html_canvas}, function(json){
                        }, 'json');
                    }
                });
            }
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
    <div id="canv">
        此网页演示了html2canvas截图后将截图后的网页追加到了原网页之上
        <br>
        <br> 这里可以看作是边界线
        <hr/>
    </div>
    <a type="button" id="down_button">下载</a>
    <?php
    if(isset($_POST['html_canvas'])){
    $order_id = $_POST['order_id'];
    $type_id = $_POST['type_id'];
    $html_canvas = $_POST['html_canvas'];
    $image = base64_decode(substr($html_canvas, 22));
    header('Content-Type: image/png');
    $filename =  $order_id.'-'.$type_id.".png";
    $fp = fopen($filename, 'w');
    fwrite($fp, $image);
    fclose($fp);
    }
    
    ?>
</body>

</html>