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

最新推荐文章于 2024-05-31 18:11:37 发布

阿豪boy

最新推荐文章于 2024-05-31 18:11:37 发布

阅读量131

点赞数

文章标签： js vue canvas css nodejs

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064790

版权

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

上一篇: revokeObjectURL 回收worker中创建的数据

下一篇: 游戏设计初学的一些文章

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>