html2canvas not taking capture of image

Question

 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/html2canvas@1.0.0-rc.5/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...

Answer 1

try setting useCORS to true

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

html2canvas not taking capture of image

Question

1 answers

solution1
1 ACCPTED 2021-02-01 13:06:37

html2canvas not taking capture of image

Question

1 answers

solution1 1 ACCPTED 2021-02-01 13:06:37

solution1
1 ACCPTED 2021-02-01 13:06:37