html2canvas 網頁截圖下載上傳

時間 2019-11-19

標籤 html2canvas html canvas 網頁截圖下載上傳欄目 HTML 简体版

原文原文鏈接

利用html2canvas插件對網頁截圖並下載和上傳圖片。javascript

<!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>