HTML save screenshot of table as table background-CodePudding

I'm using html2canvas to take a screenshot of table.

(code example found here: https://www.geeksforgeeks.org/how-to-take-screenshot-of-a-div-using-javascript/)

It's working fine, but instead of appending my document with the screenshot, I'd like to write it as new background-image into the table (It's actually a drawing thingy, where I try to save previous work as template or layer to add next...)

I'd be very happy for any hint. This is the code:

html

<container>
  <div id="photo">
     <!-- Rendering GRID -->
     <table id="pixel_canvas"></table>
  </div>
</container>
<br>
<button onclick="takeshot()">
 Take Screenshot
</button><br>
<div id="output" </div>

and js

function takeshot() 
{
   let div = document.getElementById("photo");
   html2canvas(div).then(function (pixel_canvas) 
   {
   document.getElementById("output").appendChild(pixel_canvas);
   });
};

and I want to write "output" as bg-image into <pixel_canvas>

CodePudding user response：

html2canvas obviously returns a canvas, you have to convert it to image and set it the background-image

function takeshot() 
{
   let div = document.getElementById("photo");
   html2canvas(div).then(function (pixel_canvas) {
      let pixel_canvas_element = 
      document.getElementById("pixel_canvas")
      pixel_canvas_element.style.background = `url(${pixel_canvas..toDataURL()})`;
   });
};