（简单）html转图片-html2canvas

最新推荐文章于 2025-05-25 09:53:08 发布

_揽

最新推荐文章于 2025-05-25 09:53:08 发布

阅读量564

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端学习笔记文章标签： html 前端

本文链接：https://blog.csdn.net/qq_59747594/article/details/139720489

前端学习笔记专栏收录该内容

112 篇文章

订阅专栏

官方文档

https://html2canvas.hertzen.com/

案例代码

自己创建一个html然后试一下

<!DOCTYPE html>
<html>
<head>
    <title>HTML to Image Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
</head>
<body>
 
<div id="content">
    <h1>Hello World</h1>
    <p>This is a sample content to convert to image.</p>
</div>
 
<button onclick="convertToImage()">Convert to Image</button>
 
<script>
function convertToImage() {
    html2canvas(document.querySelector("#content")).then(canvas => {
        // 创建一个图片元素
        var img = new Image();
        // 将canvas转换为DataURL格式的图片（png）
        img.src = canvas.toDataURL("image/png");
        // 将图片添加到body中
        document.body.appendChild(img);
    });
}
</script>
 
</body>
</html>

关注博主即可阅读全文