Создать один img из плиточного img

Question

Как я могу создать одно изображение из плиточной структуры, как это:

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

Answer 1

Вы можете просто сделать холст достаточно большим, чтобы вместить все ваши изображения, а затем нарисовать каждое изображение с соответствующим смещением, чтобы повторить тот же эффект листов, который обеспечивает ваш HTML.

Или, если вы действительно хотите специально захватить макет из своего HTML, есть пакет html2canvas (https://html2canvas.hertzen.com/), который будет делать снимки экрана из любого HTML, а не только мозаичных изображений.