HTML转Canvas，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

            
            <!-- 使用 html2canvas 这个库 -->

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/html2canvas/1.4.1/html2canvas.min.js" type="application/javascript"></script>

<div id="aaa">
  <h1>
    🚀hello world!512312312312321123123123123123
  </h1>
  <iframe id="ifr" src="https://bi.cool/embed/ObU1xOY" width="400px" height="300px" frameborder="0"></iframe>
  <p>
    this is some content!
  </p>
</div>

<button onclick="toImg()">toImg</button>

</body>

CSS

格式化

            
                1
2
3
4
5
6

            
            #aaa {
  display: block;
  width: 500px;
  padding: 15px;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

            
            function toImg() {

  html2canvas(document.querySelector("#aaa")).then(canvas => {
      document.body.appendChild(canvas)
  });
}

[
    88,
    85,
    82,
    76,
    79,
    81,
    73,
    83,
    84,
]

预览

控制台