如何在另一个 div 中使用 HTML2canvas 显示捕获的图像

Question

Currently when i press the button, the captured image will be displayed in the body of the HTML. But how do I make it that the captured image will only be displayed in another div with the id of "image". I tried using document.getElementById("image").appendChild(canvas) but it did not work. Need to do this as I'm planning to hide the element first by using getElementById("image").="none" and it'll only appear after a click of a button.

HTML code:

    <div>
       <table id="capture">                 
                <tr id="date" class="selected">
                   <th>Date</th>
                   <th>11/5</th>                  
                   <th>12/5</th>
                   <th>13/5</th>
                   <th>14/5</th>
                   <th>15/5</th>
                   <th>16/5</th>
                   <th>17/5</th>

                </tr>
                <tr class="selected">
                    <th>Day</th>                  
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th>Sat</th>
                    <th>Sun</th>
                </tr>           
            </table>

          <input type="button" value="Last Week's Dosage History" class="submitonclick="showlastweek()"/> 
            <button type="button" class="submit" onclick="capture1()">Capture<small></small></button>
    </div> 

    <div id="image">
    //image to be placed here
    </div>

Js code:

function capture1(){
    html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});
}

Answer 1

Here you go. Tested and working.

document.getElementById("image").appendChild(canvas); Works just fine... But getElementById("image").="none" means nothing. See below.

 function capture1() { html2canvas(document.querySelector("#capture")).then((canvas) => { document.getElementById("image").appendChild(canvas); }); } function showDiv() { var hiddenDiv = document.querySelector("#image"); hiddenDiv.style.display = hiddenDiv.style.display === "none"? "": "none"; }

 <div> <table id="capture"> <tr id="date" class="selected"> <th>Date</th> <th>11/5</th> <th>12/5</th> <th>13/5</th> <th>14/5</th> <th>15/5</th> <th>16/5</th> <th>17/5</th> </tr> <tr class="selected"> <th>Day</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> <th>Sun</th> </tr> </table> <input type="button" value="Last Week's Dosage History" class="submit" onclick="showlastweek()"/> <button type="button" class="submit" onclick="capture1()"> Capture<small></small> </button> </div> <div id="image" style="display: none;"> //image to be placed here </div> <br /> <br /> <button type="button" class="submit" onclick="showDiv()"> Toggle div display </button>