js截取html元素生成图片

最新推荐文章于 2025-07-04 18:14:42 发布

Hello_py

最新推荐文章于 2025-07-04 18:14:42 发布

阅读量1.7w

点赞数 7

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： js截图

本文链接：https://blog.youkuaiyun.com/qq_25237107/article/details/61204792

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用html2canvas库将HTML元素转换为canvas图像，并进一步保存为图片文件。需要注意的是，若目标元素包含跨域图片，可能会导致canvas被污染。

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

使用html2canvas将html元素截取到canvas显示，再由canvas转换为图片。注意：要截取的元素里面不能使用跨域名的图片链接，否则会污染canvas。
html2canvas的github链接：https://github.com/niklasvh/html2canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .my-div{
            background-color: antiquewhite;
        }
    </style>
    <script type="application/javascript" src="html2canvas.js"></script>
</head>
<body>
<div class="my-div">
    this is source
    <img src="girls%20day.jpg"/>
</div>
<div class="content">
    <span>next node is a img tag</span>
    <img id="img"/>
</div>
<script>

    //要转换为图片的dom对象
    var element = document.querySelector('.my-div');
    //要显示图片的img标签
    var image = document.querySelector('#img');
    //调用html2image方法
    html2image(element,image);

    /**
     * create by lrj
     * @param source    要转换为图片的dom对象
     * @param image     要显示图片的img标签
     */
    function html2image(source,image) {
        html2canvas(source).then(function(canvas) {
            var imageData = canvas.toDataURL(1);
            image.src = imageData;
    });
    }
</script>
</body>
</html>