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

相关文章
|
JavaScript API
Node.js:浏览器环境下使用qrcode生成二维码
Node.js:浏览器环境下使用qrcode生成二维码
491 0
Node.js:浏览器环境下使用qrcode生成二维码
|
1月前
|
JavaScript 前端开发
js的input标签上传图片并转为base64预览
js的input标签上传图片并转为base64预览
29 0
|
7月前
|
JavaScript
进入页面js加载进度条demo效果示例(整理)
进入页面js加载进度条demo效果示例(整理)
进入页面js加载进度条demo效果示例(整理)
|
7月前
|
JavaScript
js进度条载入demo效果示例(整理)
js进度条载入demo效果示例(整理)
|
前端开发 JavaScript API
Vue2.js:前端在浏览器中网页表格打印的实现方案:window.print、print-js、iframe
Vue2.js:前端在浏览器中网页表格打印的实现方案:window.print、print-js、iframe
338 0
Vue2.js:前端在浏览器中网页表格打印的实现方案:window.print、print-js、iframe
|
JavaScript Android开发
用JS删除webView的内容
用JS删除webView的内容
150 0
用JS删除webView的内容
|
JavaScript CDN
JS:dom-to-image网页截图保存
JS:dom-to-image网页截图保存
188 0
|
前端开发 JavaScript
html2canvas实现页面截图并使用axios上传
html2canvas实现页面截图并使用axios上传
394 0
html2canvas实现页面截图并使用axios上传
|
JSON JavaScript 数据库
【vue】v-for循环图片加载不出来,直接在src上面写图片链接就可以加载出来,或者使用require(图片链接)可以加载出来
【vue】v-for循环图片加载不出来,直接在src上面写图片链接就可以加载出来,或者使用require(图片链接)可以加载出来
928 0
【vue】v-for循环图片加载不出来,直接在src上面写图片链接就可以加载出来,或者使用require(图片链接)可以加载出来
|
前端开发 JavaScript Java
html2canvas+jQuery+SpringMVC 实现网页转图片并保存到服务器
前端使用的是 RequireJS + jQuery 后端使用的是 SpringMVC + MyBatis 涉及资料 html2canvas 官网 将转换后的图片存储服务器的参考 将网页转换为图片 下载插件包 html2canvas 目前最新版是 v-1.
3138 0