Question

我正在尝试将内容，图片，文字和链接的页面转换为单独的图像，如果链接必须保持不变（仍然有效），这将很容易实现（我有玩弄了将链接转换为硬文本的想法，以便可以阅读，但这会改变内容布局的方式。

文本和图像都将使用Inconsolata，因为它是"Monospaced font"，它允许我们假设每行有66个字符，前提是字体设置为18px，最大容器（div）为595px

我的计划是计算角色数量，并获得创建图像的尺寸和＃34;切断链接＆＃34;相关问题：How to count characters on a single html line with PHP。

我所谈论的一个小例子就是转换下面的文字（当前假装它的文字）：

enter image description here

使用PHP或任何可以快速完成工作的Web语言，找出链接的位置，并创建允许新图像版本包含工作链接的图像，并且与文本版本完全相同和功能（链接）。

enter image description here

Answer 1

我会将链接背景和前景色更改为图像中未出现的颜色，并使用webkit2png呈现页面。然后使用ImageMagick找到与您的链接颜色对应的颜色块，以制作图像映射。

因此，具体而言，我们假设您更改了HTML以将链接的前景色和背景色设置为红色（＃ff0000），因此您的HTML看起来像这样：

<p>
A link to Google follows:
<a style="color:#ff0000;background:#ff0000" href="www.google.com">Google</a> - a link to Google.
</p>

然后你做

webkit2png a.html

它会为您提供这样的PNG文件：

enter image description here

然后使用ImageMagick为所有不是红色到黑色的颜色着色，如下所示：

convert fileUsersmarktmpahtml-full.png -colorspace RGB -fill black +opaque "#ff0000" x.png

然后你告诉ImageMagick修剪背景，只留下红色块，然后用identify查看它的坐标，你可以看到链接的位置来获取图像映射的坐标。

convert out.png -trim y.png
identify y.png
y.png PNG 47x18 800x600+176+16 8-bit sRGB 2c 3.18KB 0.000u 0:00.000

您可以看到红色块位于图像偏移+ 176 + 16处。

您可能希望一次执行一个链接，重新呈现或多个链接。如果您执行多个链接，请询问有关在图像中查找多个blob的其他问题，或者搜索其中包含connected-components字样的其他答案（由我）。如果您在选择未使用的颜色或发现多个blob时遇到困难，只需提出另一个问题 - 它们是免费的： - ）

如果你有多个链接，更像是这样：

<!DOCTYPE html>
<html>
<body>

<p>Here comes a link...
<a style="color:#ff0000;background:#ff0000" href="www.google.com">Google</a> - a link to Google.</p>

<p>And there will be another (longer) one along shortly...
<a style="color:#ff0000;background:#ff0000" href="www.google.com">Google, but longer</a> - a link to Google.</p>

</body>
</html>

您按上述方式运行webkit2png，然后按照以下方式运行：

convert out-full.png -colorspace RGB -fuzz 10%     \
  -fill black +opaque red                          \
  -fill white -opaque red                          \
  -define connected-components:verbose=true        \
  -define connected-components:area-threshold=100  \
  -connected-components 4 -auto-level              \
  output.png

<强>输出

Objects (id: bounding-box centroid area mean-color):
  0: 800x600+0+0 399.8,301.1 476976 rgba(0,0,0,1)
  2: 121x18+357+50 417.0,58.5 2178 rgba(255,255,255,1)
  1: 47x18+140+16 163.0,24.5 846 rgba(255,255,255,1)

现在，您可以看到与第二行和第三行中的链接相对应的blobs。您可以使用ImageMagick的crop工具将这些作品和作品从图像中移出，如下所示：

convert input.png -crop 121x18+357+50 firstLink.png
convert input.png -crop 47x18+140+16  secondLink.png

Answer 2

您是否考虑过使用图片地图？使用图像映射，您可以在图像中定义可点击的热点。这样就不需要将图像切割成倍数。链接坐标的计算应该按照您在问题中详细说明的方式进行。只要字体是等宽的（参考halfer的评论）

image map docs

Answer 3

好吧，看起来你做的不仅仅是转换文本和转换HTML（可能是纯文本HTML），因为你有能力拥有一个链接。而且由于你在谈论宽度为div的div，你还需要执行自动换行（这本身实际上比听起来更难）。当你开始涉及这样的事情时，你会开始越来越多地在HTML解析器上看。

图像映射不够吗？

当链接跨越多行时，您打算做什么？或非英语语言（某些语言是从右到左而不是从左到右阅读）？

图像映射是我最初的选择，如果那是不可接受的话，我会建议从PHP转移到另一种语言（我会推荐Java）。

您能否提供一些有关您想要整理的更广泛项目的更多详细信息？

如何准确地将文本转换为（多个）图像？

3 个答案: