html2canvas将网页制作成图片，完整代码

最新推荐文章于 2025-05-29 11:52:28 发布

Mr.qingcheng

最新推荐文章于 2025-05-29 11:52:28 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： java io流 html2canvas 文章标签： js java html5

本文链接：https://blog.csdn.net/weixin_49462255/article/details/109363314

java 同时被 3 个专栏收录

6 篇文章

订阅专栏

io流

2 篇文章

订阅专栏

html2canvas

1 篇文章

订阅专栏

本文介绍如何使用html2canvas将网页内容转换为图片，并提供了一段完整的示例代码。包括了html2canvas的基本配置、参数设置及如何将生成的图片字节流传入后台进行保存。

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

html2canvas将网页制作成图片，完整代码

1.使用html2canvas
2.引入jquery和html2canvas
3.html2canvas的参数详解下面代码有注释，其他注意事项下面代码有注释。
4.字节流传入后台生成图片，注意配置nginx的请求大小

直接上完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>清城测试</title>
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../js/html2canvas.min2.js"></script>

</head>

<body>
<header style="text-align: center;background-color: #ff6633;color: #fff;height: 45px;margin-top: -12px;">
    <h1 style="padding-top: 10px;font-size: 18px;">我的专属海报</h1>
</header>

<section>

    <!--下面的div生成的图片-->
    <div id="imgDiv" style="display: none;margin-top: 20px;margin-left: 10%;margin-right: 10%">
        <img class="imgDiv_img" id="codeimg" src="" crossOrigin="anonymous" style="width: 100%;height: 500px;" />
    </div>

    <!--生成图片的html-->
    <!--这里的margin-top: 2000px是为了不让屏幕闪烁一下-->
    <div style="background-color: #e4ffc1;margin-top: 2000px;margin-left: 10%;margin-right: 10%;" id="div1">

        <div style="text-align: center;color: #00B83F">
            888888
        </div>

        <div style="text-align: center;color: #704FB8">
           666666
        </div>
        
        <div>
            <img style="width: 40%;margin-left: 30%;" src="images/8520.png">
        </div>

        <div style="text-align: center;color: #13b3b8">
            555556
        </div>

        <div style="text-align: center;color: #0986FF">
            222222
        </div>

        <div style="text-align: center;color: #FF3914">
            <span style="font-size: 15px;">服务热线：888-999-888</span>
        </div>

    </div>
</section>
</body>
<script type="text/javascript">


    window.onload = function () {


        html2canvas(document.querySelector("#div1"), {
            scale: 0.8, // 添加的scale 参数
            encoderOptions: 0.06 //控制生成的字节流大小，也就是图片的内存大小，最大定义为1
        }).then(function (canvas) {
            var imgUri = canvas.toDataURL(); // 获取生成的图片的url
            $("#codeimg").attr("src", imgUri);//将生成的字节流赋值到页面上
            $("#imgDiv").css("display", "block");
            $("#div1").css("display", "none");

            /*
            这个ajax是可以把这个字节流传入后台生成图片或者存到数据库
            $.ajax({
                async: false,
                type: "post",
                url: getContextPath() + "/qcceshi/saveImg.do",
                data: {
                    dataImg: $("#codeimg").attr("src")
                },
                dataType: "json",
                success: function (data) {
                    alert("已生成图片");
                }
            });
            */
        });
    };
</script>
</html>

后台接受字节流生成图片的代码

@RequestMapping("/saveImg")
    @ResponseBody
    public Json saveImg(@RequestParam("dataImg") String dataImg,
                          HttpServletRequest request, HttpServletResponse response) throws Exception {
        Json j = new Json();
        try {
            org.apache.commons.codec.binary.Base64 base64 = new org.apache.commons.codec.binary.Base64();
            //注意点：实际的图片数据是从 data:image/jpeg;base64, 后开始的
            byte[] k = base64.decode(dataImg.substring("data:image/png;base64,"
                    .length()));
            //图片存储路径
            String imgFilePath1 = request.getSession().getServletContext().getRealPath("/****/imageqc/" +****+ ".png");
            log.info(imgFilePath1);
            OutputStream out = new FileOutputStream(imgFilePath1);
            out.write(k);
            out.close();
            j.setSuccess(true);
        } catch (Exception e) {
            j.setSuccess(false);
            e.printStackTrace();
        }
        return j;
    }

看看效果图

图片字节流
在这里插入图片描述
生成的图片