如何准确地将文本转换为(多个)图像?

时间:2015-02-11 11:54:35

标签: php html image gd

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

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

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

我所谈论的一个小例子就是转换下面的文字(当前假装它的文字):

enter image description here

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

enter image description here

3 个答案:

答案 0 :(得分:3)

我会将链接背景和前景色更改为图像中未出现的颜色,并使用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

答案 1 :(得分:0)

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

image map docs

答案 2 :(得分:0)

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

图像映射不够吗?

当链接跨越多行时,您打算做什么?或非英语语言(某些语言是从右到左而不是从左到右阅读)?

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

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