Javascript 从平铺img创建单个img

如何从平铺结构创建单个图像，如下所示：

+-----+-----+-----+
|tile1|tile2|tile3|
+-----+-----+-----+

<div>        
  <div>    
    <img> tile 1
  </div>  
</div>
<div>        
  <div>    
    <img> tile 2
  </div>  
</div>
<div>        
  <div>    
    <img>  tile 3
  </div>  
</div>

+-----+-----+-----+
|第1排|第2排|第3排|
+-----+-----+-----+
....

您只需制作一个足以容纳所有图像的画布，然后以适当的偏移量绘制每个图像，以复制HTML提供的相同平铺效果

或者，如果您真的想从HTML中捕获布局，有一个名为html2canvas（）的包，它可以从任何HTML进行屏幕捕获，而不仅仅是平铺图像

<div style="position: absolute; left: -256px; top: -256px; width: 256px; height: 256px;">
    <div style="position: absolute; left: 0px; top: 0px;">
         <img src="tile1.png" style="width: 256px; height: 256px;">
    </div>
</div>
<div style="position: absolute; left: 0px; top: -256px; width: 256px; height: 256px;">
    <div style="position: absolute; left: 0px; top: 0px;">
         <img src="tile2.png" style="width: 256px; height: 256px;">
    </div>
</div>
....