如何将html2canvas截取的表格截图设置为对应表格的background-image

核心实现逻辑 #

• html2canvas生成的Canvas对象可通过toDataURL()方法转换为Base64格式的图片资源
• 将生成的图片资源作为值赋值给目标表格的background-imageCSS属性即可完成需求
• 生成的背景图会保留当前画布内容，后续新绘制的元素会直接叠加在背景之上，匹配图层创作的需求

代码实现 #

HTML代码（可按需移除不需要的output调试节点） #

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

JS代码 #

function takeshot() {
   let div = document.getElementById("photo");
   html2canvas(div).then(function (canvas) {
      // 将canvas转为PNG格式的base64图片
      let imgBase64 = canvas.toDataURL("image/png");
      // 获取目标表格元素
      const targetTable = document.getElementById("pixel_canvas");
      // 设置背景图，配套背景尺寸、重复规则适配表格大小
      targetTable.style.backgroundImage = `url(${imgBase64})`;
      targetTable.style.backgroundSize = "100% 100%";
      targetTable.style.backgroundRepeat = "no-repeat";
   });
};

绘图项目扩展建议 #

• 可定义全局数组存储每次生成的Base64地址，实现多图层历史管理，需要切换历史模板时直接给表格的backgroundImage赋值对应地址即可
• 若需要导出模板，可直接把存储的Base64地址转为文件下载，后续导入时直接赋值为背景图即可复用之前的作品

提示：设置背景后如果需要重新绘制，直接清空表格内的现有子元素即可，原有内容会作为底层背景保留，无需额外处理图层关系

内容的提问来源于stack exchange，提问作者user16553022