帮助将图像转换为表格

Question

我的图像上有4个矩形。 矩形为(30, 50, 100, 100), (120, 107, 230, 159), (5 , 210, 70, 233), (133, 20, 328, 80)

我需要弄清楚如何使用表格将其转换为html页面，以便每个矩形都是一个单元格。

---

我解决了！多谢你们 ：） 我根据建议最终使用了绝对定位和div。 我使用的python代码是

for i in range(len(rects)):
    page.div(style='position: absolute; left: ' + str(rects[i][0]) + 'px; top: ' + str(rects[i][1]) + 'px; width: ' + str(rects[i][2] - rects[i][0]) + 'px; height: ' + str(rects[i][3] - rects[i][1]) + 'px; border: 1px solid green')
page.div.close()

Answer 1

您确定要使用表吗？这不仅是一个坏主意，而且你不能像图像中那样任意地定位表格单元格。

使用定位DIV可能会更好：

<强> CSS：

#container {
  position: relative;
}

#rect1 {
  position: absolute;
  left: 30px;
  top: 50px;
  width: 70px; /* 100 - 30 */
  height: 50px; /* 100 - 50 */
}

/* similarly define rect2, rect3, rect4 */

<强> HTML：

<div id="container">
  <div id="rect1"></div>
  <div id="rect2"></div>
  <div id="rect3"></div>
  <div id="rect4"></div>
</div>

Working example with one rectangle

Answer 2

你不能用表格单元格（以简单的方式），但是将每个矩形变成具有绝对定位的div：

<div style="position: absolute; left: XXpx; top: YYpx; width: ZZpx; height: QQpx; border: 1px solid green" />

您可以根据已读取的矩形值计算XX，YY，ZZ和QQ。

XX是第一个值。 YY是第二个值。 ZZ是第三个值减去第一个值，QQ是第四个值减去第二个值。

Answer 3

编写一个脚本（比方说，PHP ...），它解析输入坐标并生成通过CSS绝对定位的表或div。

确切的答案取决于您输入的格式。因此，我将实际实施作为练习留给您。如果您有任何疑问，请随时与我联系。