用dom-to-image 将dom结点转图片

原创
2020/11/21 13:34
阅读数 151

 

原文链接: 用dom-to-image 将dom结点转图片

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

安装

yarn add dom-to-image

相比于html2canvas有更好的兼容性

效果还是不错的, 基本上满足了大部分需求了

<!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="/node_modules/dom-to-image/dist/dom-to-image.min.js"></script>
    <style>
      #node {
        background: deepskyblue;
        box-shadow: 10px 10px 5px blue;
      }

      h1 {
        transform: translateX(20px);
      }
    </style>
  </head>
  <body>
    <button onclick="download()">download</button>
    <div id="node">
      <img src="../a.png" alt="" />
      <h1>abcd</h1>
    </div>
    <script>
      const node = document.getElementById("node")
      async function download() {
        console.log("node", node)
        const resp = await domtoimage.toPng(node)
        console.log("resp", resp)

        const img = document.createElement("img")
        img.src = resp
        document.body.appendChild(img)
      }
    </script>
  </body>
</html>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部