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

Question

我正在尝试将内容、图像、文本和 link 的页面转换为纯图像，如果不是因为 link 必须保持不变（仍然有效）（我考虑过将 links 转换为硬文本以便可以阅读，但这会改变内容布局的方式）。

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

我的计划是计算字符数并获取创建图像的大小和 "cutting up the links" 相关问题：How to count characters on a single html line with PHP。

我正在谈论的一个小例子是像下面这样转换文本（假装它是当前文本）：

并使用 PHP 或任何可以快速完成工作的网络语言，找出 link(s) 的位置并创建允许新图像版本包含工作 links，在外观和功能上与文本版本完全相同 (links)。

Answer 1

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

image map docs

Answer 2

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

所以，具体来说，假设您更改 HTML 以将 link 的前景色和背景色设置为红色 (#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 文件：

然后使用 ImageMagick 将所有非红色的内容着色为黑色，如下所示：

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

然后你告诉 ImageMagick trim 背景，只留下红色块，然后用 identify 查看它的坐标，你可以看到 link 在哪里得到图像地图的坐标。

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。

您可能希望一次执行一个 link，然后重新渲染，或者多次 link。如果你做多个 links，要么问另一个关于在图像中找到多个斑点的问题，要么搜索其他答案（由我），其中包含单词 connected-components。例如，如果您在选择未使用的颜色或找到多个斑点时遇到困难，只需问另一个问题 - 它们是免费的:-)

如果您有多个 link，更像这样：

<!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)

现在可以看到第二行和第三行的link对应的blobs了。您可以像这样使用 ImageMagick 的 crop 工具从图像中裁剪那些和两边的片段：

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

Answer 3

好吧，看来您所做的不仅仅是转换文本，还包括转换 HTML（可能只是文本 HTML），因为您有能力拥有 link。并且由于您正在谈论具有宽度的 div ，因此您还需要执行自动换行（这本身实际上比听起来更难）。当您开始接触类似的东西时，您将开始越来越多地关注 HTML 解析器。

图像映射不够吗？

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

图像映射是我的初步选择，如果不能接受，那么我会建议从 PHP 转移到其他语言（我会推荐 Java）。

您能否提供更多有关您试图整合的更广泛项目的详细信息？

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

How to convert text to (mutiple) images exactly?

html

php

gd

image