HTML转Canvas，在线预览HTML/Vue

HTML

格式化

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

<head> ...

展开

</head>

<body>

<!-- 使用 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!ffff
  </h1>
  <p>
    this is some content!
  </p>
</div>

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

</body>

CSS

格式化

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

格式化

function toImg() {

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

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

预览

控制台