CODEWITHSUNDEEP
javascripthtmlcssscreenshothtml2canvas
Altro
Altro

Reputation: 938

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...

Upvotes: 1

Views: 2084

Answers (1)

Tsch&#246;si
Tsch&#246;si

Reputation: 579

try setting useCORS to true

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

Upvotes: 1

Related Questions