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

Question

目前，当我按下按钮时，捕获的图像将显示在HTML的主体中。但我怎样才能使拍摄的图片只显示在另一个id为 "image "的div中。我试过使用document.getElementById("image").appendChild(canvas)，但没有成功。需要这样做，因为我打算先用getElementById("image").="none "隐藏该元素，只有在点击按钮后才会出现。

HTML代码。

    <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代码。

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

Answer 1

在这里，你去。经过测试，成功了。

document.getElementById("image").appendChild(canvas); 工作就好了... 但是... getElementById("image").="none" 意味着什么。见下文。

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>