html2canvas 不捕获图像

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>

在这段代码中，捕获对两种文本都有效，但对 <img /> 标签或其他一些外部标签（如 <deckgo-drr>）无效，有什么方法可以截取我们实际看到的屏幕吗, 就像智能手机的截图功能只是捕捉瞬间而已

为什么它不起作用？

正在捕获除 img 标签之外的所有内容，而且不仅我使用了标签，它们也没有被捕获...

Answer 1

尝试将 useCORS 设置为 true

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

html2canvas 不捕获图像

html2canvas not taking capture of image

html

javascript

css

screenshot

html2canvas