从平铺的 img 创建单个 img答案

【问题标题】：Create a single img from tiled img从平铺的 img 创建单个 img
【发布时间】：2018-10-14 23:30:20
【问题描述】：

如何从这样的平铺结构创建单个图像：

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

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

这是细节：

<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>
....

【问题讨论】：

标签： javascript jquery css html html5-canvas

【解决方案1】：

您可以简单地制作一个足够大的画布来容纳所有图像，然后以适当的偏移量绘制每个图像，以复制 HTML 提供的相同平铺效果。

或者，如果您真的想专门从 HTML 中捕获布局，有一个名为 html2canvas (https://html2canvas.hertzen.com/) 的包可以从任何 HTML 中进行屏幕捕获，而不仅仅是平铺图像。

【讨论】：