<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="../script/jquery-1.9.1.min.js"></script>

    <script src="../script/html2canvas.js"></script>

    <style type="text/css">

        .divBody {

            position: absolute;

            width: 100%;

            height: 100%;

            background: url(../images/bg.jpg) no-repeat center top;

            background-size: 100% 100%;

            font-family: "黑體";

            color: #292929;

            letter-spacing: 2px;

            z-index: 1000;

        }

        .divInfo {

            width: 76%;

            margin-left: 12%;

            position: relative;

            top: 25%;

            text-align: center;

        }

        #btnDown{

            position:absolute;

            top:15px;

            right:10px;

            z-index:1000;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div id="divBody" class="divBody">

        <div class="divInfo" id="divInfo">

            <h1>劍來語錄</h1>

            <div>

                <p>我住人間萬古宅，大日高升在牆東。</p>

                <p>睜眼便覺擾清夢，敕令明月墜其中。</p>

                <p>天上仙佛三百萬，遇我也須稱上神。</p>

                <p>醉乘白鹿駕青虯，列仙遇我求醇酒。</p>

                <p>掛冠天宮桂枝上，手抓金烏做炭籠。</p>

                <p>悲哉仙人千秋夢，一夢見我誤長生。</p>

            </div>

        </div>

    </div>

    <div id="btnDown">

        <img src="../images/share.png" style="width:2rem;height:2rem;" />

    </div>

</body>

</html>

<script type="text/javascript">

    $(function () {

        $("#btnDown").click(function () {

            downPNG("下載圖片.png", "divBody");

        });

    });

    function downPNG(pngName, pngId) {

        var scaleBy = getDPR();//獲取畫素比

        var canvas = document.createElement('canvas');// 建立自定義 canvas 元素

        // 設定 canvas 元素屬性寬高為 DOM 節點寬高 * 畫素比

        var width = document.getElementById(pngId).clientWidth;

        var height = document.getElementById(pngId).clientHeight;

        canvas.width = width * 2;

        canvas.height = height * 2;

        var context = canvas.getContext('2d');

        // 將所有繪製內容放大畫素比倍

        context.scale(2, 2);

        var rect = document.getElementById(pngId).getBoundingClientRect(); //獲取元素相對於視察的偏移量

        context.translate(-rect.left, -rect.top); //設定context位置，值為相對於視窗的偏移量負值，讓圖片復位

        html2canvas(document.getElementById(pngId), {

            canvas,

            dpi: 300,

            scale: 1,

            useCORS: true, //（圖片跨域相關）

            allowTaint: false, //允許跨域（圖片跨域相關）

            onrendered: function (imgCanvas) {

                var imgData = imgCanvas.toDataURL('image/octet-stream');

                if (imgCanvas.msToBlob) { // IE 9+瀏覽器

                    var blob = imgCanvas.msToBlob();

                    window.navigator.msSaveBlob(blob, pngName);

                } else {

                    saveFile(imgData, pngName);

                }

            }

        });

    }

    function saveFile(data, filename) {

        //微信瀏覽器不能直接下載圖片,需要展示一張圖片長按下載...

        if (is_weixn()) {

            //方法一

            var img = document.createElement('img');

            img.src = data;

            img.style.width = "100%";

            $("#divBody").html(img);

            //方法二

            // var html = "<img src ='" + data + "' style='width:100%;height:100%' />";

            // $("#divBody").html(html);

            $("#btnDown").hide();//隱藏分享按鈕

            alert("圖片生成成功,長按儲存圖片！");//提示使用者長按下載圖片

        } else {

            console.log(1);

            //直接下載圖片

            var save_link = document.createElement('a');

            save_link.href = data;

            save_link.download = filename;

            var event = document.createEvent('MouseEvents');

            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

            save_link.dispatchEvent(event);

        }

    };

    function getDPR() {

        if (window.devicePixelRatio && window.devicePixelRatio > 1) {

            return window.devicePixelRatio;

        }

        return 2;

    }

    function is_weixn() {

        var ua = navigator.userAgent.toLowerCase();

        if (ua.match(/MicroMessenger/i) == "micromessenger") {

            return true;

        } else {

            return false;

        }

    }

</script>