js+Canvas 利用js 實現瀏覽器保存圖片到本地

時間 2019-12-08
標籤 js+canvas canvas 利用實現瀏覽器保存圖片本地欄目 JavaScript 简体版
原文原文鏈接
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Canvas 利用js 實現瀏覽器保存圖片到本地</title>
        <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
        <script src="js/html2canvas.js"></script>
    </head>
    <style>
        .main{
            width: 900px;
            height: 620px;
            border: 2px solid green;
            border-radius: 10px;
            margin: 20px auto;
        }
        .main h3{
            text-align: center;
        }
        .main p{
            text-indent: 2em;
            font-size: 14px;
        }
        #canvasImg{
            position: fixed;
            width: 900px;
            height: 480px;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            border: 1px solid red;
            border-radius: 5px;
            display: none;
            background-color: white;
        }
        #canvasImg canvas,#canvasImg img{
            width: 100% !important;
            height: auto !important;
        }
        .sub-div{
            width: 100%;
            text-align: center;
        }
        #sub{
            padding:8px 20px;
            background-color: #08bf91;
            border: 1px solid #08bf91;
            border-radius: 500px;
            color: white;
            outline: none;
            cursor: pointer;
        }
        .downloadPic{
            padding: 8px 20px;
            background-color: #F0AD4E;
            border: 1px solid #F0AD4E;
            border-radius: 500px;
            color: white;
            outline: none;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
        }
    </style>
    <body>
        <div class="container">
            <div class="main" id="main">
                <h3>背影</h3>
                <p>我與父親不相見已二年餘了，我最不能忘記的是他的背影。</p>
                <p>那年冬天，祖母死了，父親的差使1也交卸了，正是禍不單行的日子。我從北京到徐州，打算跟着父親奔喪2回家。到徐州見着父親，看見滿院狼藉3的東西，又想起祖母，不由簌簌地流下眼淚。父親說：「事已如此，沒必要難過，好在天無絕人之路！」</p>
                <p>回家變賣典質4，父親還了虧空；又借錢辦了喪事。這些日子，家中光景5非常慘澹，一半爲了喪事，一半爲了父親賦閒6。喪事完畢，父親要到南京謀事，我也要回北京唸書，咱們便同行。</p>
                <p>到南京時，有朋友約去遊逛，勾留7了一日；第二日上午便須渡江到浦口，下午上車北去。父親由於事忙，本已說定不送我，叫旅館裏一個熟識的茶房8陪我同去。他再三囑咐茶房，甚是仔細。但他終於不放心，怕茶房不妥帖9；頗躊躇10了一會。其實我那年已二十歲，北京已來往過兩三次，是沒有什麼要緊的了。他躊躇了一會，終於決定仍是本身送我去。我再三勸他沒必要去；他只說：「沒關係，他們去很差！」</p>
                <p>咱們過了江，進了車站。我買票，他忙着照看行李。行李太多，得向腳伕11行些小費纔可過去。他便又忙着和他們講價錢。我那時真是聰明過度，總覺他說話不大漂亮，非本身插嘴不可，但他終於講定了價錢；就送我上車。他給我揀定了靠車門的一張椅子；我將他給我作的紫毛大衣鋪好座位。他囑我路上當心，夜裏要警醒些，不要受涼。又囑託茶房好好照應我。我內心暗笑他的迂；他們只認得錢，託他們只是白託！並且我這樣大年紀的人，難道還不能料理本身麼？我如今想一想，我那時真是太聰明瞭。</p>
                <p>我說道：「爸爸，你走吧。」他望車外看了看，說：「我買幾個橘子去。你就在此地，不要走動。」我看那邊月臺的柵欄外有幾個賣東西的等着顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去天然要費事些。我原本要去的，他不願，只好讓他去。我看見他戴着黑布小帽，穿着黑布大馬褂12，深青布棉袍，蹣跚13地走到鐵道邊，慢慢探身下去，尚不大難。但是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀着上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。這時我看見他的背影，個人淚很快地流下來了。我趕忙拭乾了淚。怕他看見，也怕別人看見。我再向外看時，他已抱了硃紅的橘子往回走了。過鐵道時，他先將橘子散放在地上，本身慢慢爬下，再抱起橘子走。到這邊時，我趕忙去攙他。他和我走到車上，將橘子一古腦兒放在個人皮大衣上。因而撲撲衣上的泥土，內心很輕鬆似的。過一下子說：「我走了，到那邊來信！」我望着他走出去。他走了幾步，回過頭看見我，說：「進去吧，裏邊沒人。」等他的背影混入來來每每的人裏，再找不着了，我便進來坐下，個人眼淚又來了。</p>
                <p>近幾年來，父親和我都是東奔西走，家中光景是一日不如一日。他少年出外謀生，獨力支持，作了許多大事。哪知老境卻如此頹唐！他觸目傷懷，天然情不能自已。情鬱於中，天然要發之於外；家庭瑣屑便每每觸他之怒。他待我漸漸不一樣往日。但最近兩年不見，他終於忘卻個人很差，只是惦記着我，惦記着他的兒子。我北來後，他寫了一信給我，信中說道：「我身體平安，唯膀子疼痛厲害，舉箸14提筆，諸多不便，大約大去之期15不遠矣。」我讀到此處，在晶瑩的淚光中，又看見那肥胖的、青布棉袍黑布馬褂的背影。唉！我不知什麼時候再能與他相見！</p>
            </div>
            <div class="sub-div"><button type="button" id="sub">將綠色邊框中的網頁截圖</button><a class="downloadPic">下載圖片</a></div>
        </div>
        <div id="canvasImg">
            
        </div>
        <script>
            $('#sub').on('click', function(event) {
                event.preventDefault();
                $('#canvasImg').html('');
                html2canvas(document.body).then(function(canvas) {
                    var time=new Date().getTime();
                    $('#canvasImg').show();
                    var dataUrl = canvas.toDataURL();
//                    var newImg = document.createElement("img");
//                    newImg.src =  dataUrl;
//                    $('#canvasImg').append(newImg);  
                    $('#canvasImg').append(canvas);
                    $('.downloadPic').prop({'download':time,"href":dataUrl});
//                    console.log(dataUrl);
                });
            });
            $('.downloadPic').click(function(){
                var children=$('#canvasImg').children().length;
                if(children<=0){
                    alert('您還未截屏，沒法下載');
                }
            });
        </script>
    </body>
</html>