Editing 截图全屏

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />

    <title>截图整个网页</title>
</head>

<body>
    <button id="btn">点击按钮 或 双击页面 生成网页截图 <img src="/favicon.ico" style="height:1em" /></button>
    <ul id="warp"></ul>
</body>

</html>

* {
    outline: none;
    box-sizing: border-box;
}

button {
    font-size: 1.5em;
}

#warp {
    padding: 0;
    margin: 0 0.5em;
    list-style: none;
    user-select: none;
}

#warp li {
    float: left;
    margin: 0.5em;
    width: 3em;
    height: 3em;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    border-radius: 1em;
}

//构建内容
function bg3() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + ',' + g + ',' + b + ")";
}
var ubox = document.getElementById('warp');
function buildCell(n) {
    do {
        var li = document.createElement("li");
        li.innerHTML = `${n} <br/> <img src="/favicon.ico" />`;
        li.style.backgroundColor = bg3();
        ubox.appendChild(li);
    } while (n--)
}
buildCell(111);


//截图
var cs = {
    init: function () {
        if ("html2canvas" in window) {
            cs.screen();
        } else {

            cs.getScript("https://ss.netnr.com/html2canvas@1.4.1/dist/html2canvas.min.js", function () {
                cs.screen();
            });
        }
    },
    screen: function () {
        html2canvas(document.documentElement).then(canvas => {
            //document.body.appendChild(canvas);
            var png = canvas.toDataURL("image/png");

            //下载
            var oA = document.createElement("a");
            oA.download = document.title + ".png";
            oA.href = png;
            document.body.appendChild(oA);
            oA.click();
            oA.remove();
        });
    },
    getScript: function (src, success) {
        var ele = document.createElement("SCRIPT");
        ele.src = src;
        ele.type = "text/javascript";
        document.getElementsByTagName("HEAD")[0].appendChild(ele);
        if (success != undefined) {
            ele.onload = ele.onreadystatechange = function () {
                if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") { success(); }
            }
        }
    }
};
document.getElementById("btn").onclick = document.body.ondblclick = function () {
    cs.init();
}