js实现html页面转图片、并保存到本地

最新推荐文章于 2025-06-16 12:02:59 发布

StarFishing

最新推荐文章于 2025-06-16 12:02:59 发布

阅读量2.6w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js canvas

本文链接：https://blog.youkuaiyun.com/qq_34803821/article/details/84668284

js 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何利用js将HTML页面转换成canvas，再转化为image，最终保存到本地。涉及到的关键技术包括html2canvas库和canvas2image库。在pc端和移动端需要注意不同的保存策略，移动端可以通过长按保存图片，而pc端则需要通过特定的代码来触发保存。同时，文章提到了在本地测试时可能出现的跨域问题，建议在线上环境测试以避免该问题。

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

js实现html页面转图片，并保存图片在本地，实现原理为（html转canvas、canvas转image）

需要的库：canvas2image.js 下载地址：https://github.com/SuperAL/canvas2image；
需要的库：html2canvas.js 下载地址：http://html2canvas.hertzen.com/dist/html2canvas.min.js
效果如下：
在这里插入图片描述

首先是html页面:

<head>
    <meta charset="utf-8">
     <meta name="viewport" content="width=320,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>实现HTML转图片</title>
    <style type="text/css" media="screen">
        .bg{
                width: 100%;
                min-height: 100%;
                height: 100vh;
                background-color: #a799ac;
                text-align: center;
        }
        .text{
            width: 50%;
            margin-top: 20%;
            height: 25px;
            border: 1px solid #b7c092;
            border-radius: 10px;
            outline: none;
        }
        .save, .picture{
            border-radius: 10px;
            border: none;
            width: 60px;
            padding: 0;
            height: 25px;
            background: #9cd8b1;
            outline: none;
        }
        .title{
            /* margin-top: 100px; */
        }
        .need{
                /* background: url(20.jpg) no-repeat; */
                background-size: 400px;
                 background: linear-gradient(#3793b6, #c993d3);
        }
img{
    margin-top: 50px;
    width: 100%;
    height: 200px;
}
    </style>

</head>
<body style="padding: 0;margin: 0;">
<div class="bg">
    <input type="input" name="姓名" class="text" placeholder="输入姓名">
    <button type="button" class="save">确认</button>
    <button type="button" class="picture">生成图片</button>
   <div class="need" style="height: 200px;width: 400px">
    <p class="title" style="color: white">hello</p>
    <p class="area" style="color: white">欢迎，这里是你需要截取到的区域</p>
</div>
</div>

</body>

有了页面我们就开始html到图片的转换逻辑;

首先在页面中引入我们需要用的js文件

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js" type="text/javascript" charset="utf-8" async defer></script>
<script src="canvas2image.js" type="text/javascript" charset="utf-8" async defer></script>
// 我已经将canvas2image.js放到工程目录，所以这里直接引用即可

然后编写我们的逻辑代码,因为代码中我已经给出了详细注释，所以就不累述了

代码如下：

    var text=$(".text").val();
    var info=$(".title");
    var save = $(".save");
    let w = $(window).width(); //图片宽度
    let h = $(window).height(); //图片高度
    console.log(w+"    "+h);
    save.click(function(e){
        // 获取输入框内容
        var text=$(".text").val();
        // 控制台输出，一般用于测试时开效果，实际项目不需要
        console.log(text);
        // 非空判断 
        if(!text)return;
        else // 不为空则加载到页面
        info.text(text);
    });
    var need = $(".need").get(0); //将jQuery对象转换为dom对象
    function getOS() { // 获取当前操作系统
    var os;
    if (navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1) {
        os = 'Android';
    } else if (navigator.userAgent.indexOf('iPhone') > -1||navigator.userAgent.indexOf('iPad') > -1) {
        os = 'iOS';
    } else if (navigator.userAgent.indexOf('Windows Phone') > -1) {
        os = 'WP';
    } else {
        os = 'Others';
    }
    return os;
}
console.log("操作系统"+getOS());

    // 点击转成canvas，最后用于生成图片
    $('.picture').click(function(e) {

        // 调用html2canvas插件
        html2canvas(need).then(function(canvas) {
            // canvas宽度
            var canvasWidth = canvas.width;
            // canvas高度
            var canvasHeight = canvas.height;
            // 控制台查看绘制区域的宽高
            console.log(canvasWidth+"    "+canvasHeight);

            // 渲染canvas，这个时候将我们用于生成图片的区域隐藏
             $(".need").hide();
                // 下面注释内容为测试内容，测试时可以去掉注释，方便查看生成的canvas区域
                // $(".need").after(canvas);

                // 调用Canvas2Image插件
                let w = $(window).width(); //图片宽度
                // let h = $(window).height(); //图片高度
                // 这里因为我们生成图片区域高度为400，所以这里我们直接指定
                let h = 400;

                // 将canvas转为图片
                var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
                // 渲染图片，并且加到页面中查看效果
                $(".need").after(img);

                    // 保存
                    let type = "png"; //图片类型
                    let f = "DNF"; //图片文件名，自定义名称
                    // w = (w === '') ? canvasWidth : w; //判断输入宽高是否为空，为空时保持原来的值
                    // h = (h === '') ? canvasHeight : h;

                    // 这里的判断用于区分移动端和pc端
                    if(getOS()=="Others")
                    {
                    // 调用Canvas2Image插件
                    Canvas2Image.saveAsImage(canvas, w, h, type, f);
                    }
        });
    });

注意一：

代码最后之所以要区分移动端与pc端，是因为在测试过程中发现，在pc端时，花括号内的代码执行有效，可以弹出提示让你保存图片到本地，当在移动端时，此方法会出现bug,因为图片采用的是base64格式，浏览器无法解析，就会导致页面跳转，无法保存图片，所以上面程序中加上区分后，不在移动端弹出保存到本地，因为移动端本身可以对长按图片保存有很好的支持，所以这部分代码就不需要了；经测试在iOS和Android上都是有效的，只要长按生成的图片就可以报讯到本地；

注意二：

细心的同学会发现我在开始的样式文件中注释掉了一个图片：

        .need{
                /* background: url(20.jpg) no-repeat; */
                background-size: 400px;
                 background: linear-gradient(#3793b6, #c993d3);
        }

因为在我们的业务中，我们可能是有背景图的，然后加上一些业务信息一起生成一张图片，当我们加上了背景图片后，代码在本地运行时会报错，原因是当我们保存图片时，会产生canvas2image报的跨域错误，这个问题也很好解决，只要我们将项目放在线上测试就不会有问题了，不要在本地测试就行，比如发布到GitHub上进行托管，然后在线上查看效果就不会有问题了，我是将图片放在了根目录下上传到GitHub的，不知道如果是图片外链形式会不会有问题，欢迎同学们尝试，留言你的建议核问题；