js 将页面保存为图片，并保存到本地，以供使用

勇闯天亚

于 2020-04-11 20:03:36 发布

阅读量908

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

原文链接：https://www.cnblogs.com/xieyongbin/p/10921913.html

前端专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一种使用html2canvas库将网页内容转换并保存为图片的方法。通过JavaScript实现，用户点击按钮即可将指定的DOM元素渲染成PNG格式的图片进行下载。此技术适用于网页快照、分享预览图等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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