Get started with html2canvas CDN

MIT licensed

Library: HTML2Canvas - captures, renders webpage parts as images.

Tags:
  • canvas
  • screenshot
  • html5

Stable version

Copied!

How to start using html2canvas CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with html2canvas CDN - cdnhub.io</title>
    <style>
        #myImage {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <button id="takeScreenshot">Take a screenshot</button>
    <div id="myContent" style="width: 300px; height: 300px;">
        <p>This is some content to be captured.</p>
        <img id="myImage" src="https://picsum.photos/id/237/300/300" alt="Placeholder image">
    </div>

    <script src="https://cdn.cdnhub.io/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const takeScreenshotButton = document.getElementById('takeScreenshot');
            const myContent = document.getElementById('myContent');

            takeScreenshotButton.addEventListener('click', function() {
                html2canvas(myContent).then(canvas => {
                    const image = new Image();
                    image.src = canvas.toDataURL();
                    document.body.appendChild(image);
                });
            });
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions