JS:dom-to-image网页截图保存

简介: JS:dom-to-image网页截图保存

文档:https://github.com/tsayen/dom-to-image

CDN

<script src="https://cdn.bootcdn.net/ajax/libs/dom-to-image/2.6.0/dom-to-image.js"></script>

代码示例

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        width: 200px;
        border-collapse: collapse;
        border: 1px solid black;
      }
      tr {
        background: green;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/dom-to-image/2.6.0/dom-to-image.js"></script>
  </head>
  <body>
    <input type="button" onclick="saveImage()" value="保存图片" />
    <table id="table">
      <tr>
        <td rowspan="3">200</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td rowspan="2">500</td>
        <td>600</td>
      </tr>
      <tr>
        <td>600</td>
      </tr>
    </table>
    <script>
      function saveImage() {
        domtoimage
          .toPng(document.getElementById("table"))
          .then(function (dataUrl) {
            var link = document.createElement("a");
            link.download = "my-image-name.jpeg";
            link.href = dataUrl;
            link.click();
          });
      }
    </script>
  </body>
</html>

image.png

相关文章
教大家用 Python 绘制几棵圣诞树~
今天分享五种用 Python 绘制圣诞树的方法,从基础到高级,效果也不断攀升分为 1 到 5 五个 Level 水平;
教大家用 Python 绘制几棵圣诞树~
|
5月前
|
人工智能 自然语言处理 IDE
如何让 AI 成为你的编程搭档?一次真实重构告诉你答案
Cursor是一款面向开发者的智能代码编辑器,基于VS Code深度集成AI模型,支持自然语言编写代码、解释逻辑、重构和Bug查找。它提供Agent、Ask、Manual三种模式,具备模块级开发能力,能跨文件操作并主动学习代码库。但其效果依赖模型能力,对复杂跨应用任务仍有限。
如何让 AI 成为你的编程搭档?一次真实重构告诉你答案
|
JSON 人工智能 算法
探索LLM推理全阶段的JSON格式输出限制方法
文章详细讨论了如何确保大型语言模型(LLMs)输出结构化的JSON格式,这对于提高数据处理的自动化程度和系统的互操作性至关重要。
2346 52
|
机器学习/深度学习 人工智能 算法
ML.NET:一个.NET开源、免费、跨平台的机器学习框架
ML.NET:一个.NET开源、免费、跨平台的机器学习框架
695 2
|
定位技术
R语言raster包计算多个栅格图像平均值、标准差的方法
R语言raster包计算多个栅格图像平均值、标准差的方法
382 1
|
XML JSON 数据格式
探索 HTTP 请求的世界:get 和 post 的奥秘(上)
探索 HTTP 请求的世界:get 和 post 的奥秘(上)
探索 HTTP 请求的世界:get 和 post 的奥秘(上)
|
机器学习/深度学习 数据采集 Rust
Rust交互式编程环境搭建
数据科学和机器学习社区似乎压倒性地偏爱Jupyter Notebook。本文将带领大家一步一步搭建起Rust交互式编程环境。让Jupyter 可以运行Rust代码。
1142 0
Rust交互式编程环境搭建
|
存储 前端开发 JavaScript
基于SpringBoot的社区空巢老人健康管理系统的设计与实现
基于SpringBoot的社区空巢老人健康管理系统的设计与实现
988 1
基于SpringBoot的社区空巢老人健康管理系统的设计与实现
|
Linux Windows
Windows中解压Linux中产生的tar.gz分卷压缩包--Bandizip
Windows中解压Linux中产生的tar.gz分卷压缩包--Bandizip
Windows中解压Linux中产生的tar.gz分卷压缩包--Bandizip