实现网页内容截图并下载：html2Canvas 实战指南

JCT-多多

已于 2024-12-26 15:31:22 修改

阅读量271

点赞数 1

文章标签： javascript 前端 html

于 2024-12-23 15:48:08 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45761438/article/details/144668310

版权

基本原理:

html2Canvas是一个 JavaScript 库，它能够将 HTML 元素渲染为 canvas 图像。其原理是遍历 DOM 树，将每个元素的样式和内容转换为 canvas 绘图命令。然后，通过操作 canvas，可以将其转换为图像数据，进而实现下载功能。

html2canvas 库的官方文档网站http://html2canvas - Screenshots with JavaScript

使用:

1.引入html2Canvas库 2.编写 HTML 结构和 CSS 样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Assets/Module/html2canvas/html2canvas.js"></script>
</head>

<body>
    <div id="export-area" style="padding: 10px; background: #f5da55">
        <h4 style="color: #000; ">Hello world!</h4>
    </div>
    <button onclick="exportCanvas()">下载图片</button>
</body>
<script>
    function exportCanvas() {
        const element = document.getElementById('export-area');
        html2canvas(element).then(canvas => {
            // 创建一个图像元素
            var img = canvas.toDataURL("image/png");
            // 创建一个链接元素
            var link = document.createElement('a');
            // 设置下载属性
            link.href = img;
            link.download = 'exported-image.png';
            // 触发下载
            link.click();
        });
    }
</script>

</html>