Get started with html-to-image CDN

MIT licensed

The HTML-to-image library converts HTML elements into images.

Tags:
  • screenshot
  • capture
  • canvas
  • html
  • dom
  • image
  • vector
  • svg

Stable version

Copied!

How to start using html-to-image CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with html-to-image CDN - cdnhub.io</title>
  <style>
    #container {
      width: 300px;
      height: 200px;
      border: 1px solid black;
      padding: 10px;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/htmldetoimage.min.js"></script>
  <script>
    async function saveImage() {
      const container = document.getElementById('container');
      const image = await htmlToImage.toPng(container);
      const link = document.createElement('a');
      link.href = URL.createObjectURL(image);
      link.download = 'image.png';
      link.click();
    }
    saveImage();
  </script>
</body>
</html>
Copied!
Copied!

All versions