当前位置 博文首页 > u012442504的专栏:js 将页面保存为图片,并保存到本地,以供使

    u012442504的专栏:js 将页面保存为图片,并保存到本地,以供使

    作者:[db:作者] 时间:2021-09-23 10:34

    <!DOCTYPE html>
    <html>
    <head>
    <title>保存为images</title>
    <meta charset="utf-8" >
    </head>
    <body class="Body">
    <div class="AllWrap relative">
    
        <button title="保存为图片" style="position: absolute;top:30px;left:100px;" onclick="saveCanvas()">保 存</button>
        <a href="" download="下载图.png" id="download"></a>
    
    </div>
    
    </body>
    <script src="/common/js/util/jquery-1.9.1.min.js"></script>
    
    
    <script src="https://blog-static.cnblogs.com/files/xieyongbin/html2canvas.min.js"></script>
    <script>
        function saveCanvas() {
            html2canvas($(".Body")).then(function(canvas) {
                var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                $("#download").attr("href",imgUri);
                console.log(imgUri);
                document.getElementById("download").click();
            });
        }
    </script>
    </html>

    ?

    cs