dom元素转图片 - html2canva

最新推荐文章于 2022-12-30 16:50:11 发布

顾鸟

最新推荐文章于 2022-12-30 16:50:11 发布

阅读量200

点赞数

分类专栏： js 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_40881695/article/details/121485625

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 效果图

在这里插入图片描述

2. 理解

通过 html2canvas 把 dom 元素转化为 canvas 格式，然后通过 canvas.toDataURL(“image/png”) 获取图片 base64 地址

3. 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./html2canvas.js"></script>
    <style>
      .container {
        background-color: antiquewhite;
      }
    </style>
  </head>
  <body>
    <div id="container" class="container">111</div>
  </body>
  <script>
    html2canvas(document.querySelector("#container")).then((canvas) => {
      var image = new Image();
      image.src = canvas.toDataURL("image/png");
      document.body.appendChild(image);
    });
  </script>
</html>