Search code examples
javascripthtmlcssscreenshothtml2canvas

html2canvas not taking capture of image

function takeshot() {
    let div = document.getElementById('result');

    html2canvas(div).then(
        function (canvas) {
            document
                .getElementById('output')
                .appendChild(canvas);
        })
}
html2canvas(document.getElementById("result"), {scale: 1}).then(canvas => {
    document.body.appendChild(canvas);
});
<!DOCTYPE html>
<html lang="en">

<head>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alphardex/aqua.css@master/dist/aqua.min.css">

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js">
    </script>


    <script type="module"
        src="https://unpkg.com/@deckdeckgo/drag-resize-rotate@latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.esm.js"></script>

    <script nomodule=""
        src="https://unpkg.com/@deckdeckgo/drag-resize-rotate@latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.js"></script>

    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"> -->


    <link rel="stylesheet" href="css/styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <!-- <link rel="stylesheet" href="subj.css"> -->

    <link
        href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&family=Gloria+Hallelujah&family=Indie+Flower&family=Lobster&family=Special+Elite&display=swap"
        rel="stylesheet">

    <title>Constructor</title>
</head>

<body>

    <div class="parent">
        <div id="result">
                <img src="https://picsum.photos/500/500" alt="" />
                en inch piti tpvi
                <h3>Heading </h3>
        </div>

        <form class="login-form" action="javascript:void(0);">
            <button onclick="takeshot()">
                Take Screenshot
            </button>
        </form>

    </div>


    <div id="output"></div>
    <!-- <button onclick="delete1()">Delete</button> -->


    <script src="script.js"></script>
</body>

</html>

In this code, capturing is working for both texts, but not for <img /> tags or some other external tags like <deckgo-drr>, Is there some way to screenshot the screen that we are actually seeing, like smartphone's screenshot function just capture the moment that's all

Why it is not working?

Capturing everything except img tags, and not only I am using tag they are not getting captured neither...

Solution

  • try setting useCORS to true

    html2canvas(document.getElementById("result"), {useCORS: true, scale: 1}).then(canvas => {
    document.body.appendChild(canvas);
});