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生成二维码
611 0
Node.js:浏览器环境下使用qrcode生成二维码
|
4月前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
235 0
|
5月前
|
JavaScript 前端开发
js如何渲染页面内容
js如何渲染页面内容
45 0
|
8月前
|
前端开发 JavaScript PHP
解决在页面中无法获取qrcode.js生成的base64的图片
该文档介绍了如何解决在部分安卓手机上无法正确加载二维码图片的问题。之前的方法是使用qrcode.js生成二维码,然后与背景图结合用canvas绘制海报,但在某些安卓设备上遇到onload事件不触发的问题。
142 2
|
8月前
|
JavaScript
js判断图片是否加载完成
js判断图片是否加载完成
89 0
|
移动开发 JavaScript
Vue H5页面长按保存为图片
Vue H5页面长按保存为图片
272 1
|
JavaScript 前端开发
前端html,js实现图片的上传与下载
前端html,js实现图片的上传与下载
260 1
|
JavaScript
Js获取富文本所有图片src地址
Js获取富文本所有图片src地址
148 0
|
JavaScript
uni vue 替换接口 v-html的图片
uni vue 替换接口 v-html的图片
126 0
|
前端开发 JavaScript
html2canvas实现页面截图并使用axios上传
html2canvas实现页面截图并使用axios上传
503 0
html2canvas实现页面截图并使用axios上传

热门文章

最新文章