HTML 将 table 的屏幕截图保存为 table 背景

Question

我正在使用 html2canvas 截取 table 的屏幕截图。

（在此处找到的代码示例：https://www.geeksforgeeks.org/how-to-take-screenshot-of-a-div-using-javascript/）

它工作正常，但我不想将屏幕截图附加到我的文档中，而是想将它作为新的背景图像写入 table（它实际上是一个绘图的东西，我试图在其中保存以前的作品作为模板或图层添加到下一个...)

如果有任何提示，我将非常高兴。这是代码：

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>

和 js

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

我想将“输出”作为 bg-image 写入

Answer 1

html2canvas 显然 returns 一个 canvas，你必须将其转换为图像并将其设置为背景图像

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()})`;
   });
};

HTML 将 table 的屏幕截图保存为 table 背景

HTML save screenshot of table as table background

html

screenshot

html-table

background-image