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

我试图将内容，图像，文本和链接的页面转换为完全图像，如果不是链接必须保持不变（仍然有效）的事实，这将很容易完成（我已经玩过想法转换链接到硬文本，以便他们可以阅读，但改变了内容的布局方式）。如何将文本转换为（多个）图像？

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

我的计划是计算字符，并获得创建图像和“切割链接”相关问题的大小：How to count characters on a single html line with PHP。

什么我谈论将文本转换像下面一个小例子（假装这是文本目前）：

enter image description here

而且使用PHP或任何Web语言，将做的工作速度快，找出链接的位置并创建图像，使新图像版本包含工作链接，并且与外观和功能（链接）中的文本版本完全相同。

enter image description here

来源

2015-02-11 Benjamin

什么问题？我可以在图像中看到另一种颜色的链接，并且它在文本中设置得很好！ – SaidbakR 2015-02-11 11:59:03

您指的是等宽字体，但您的示例显然不是等宽字体，因此您不能假设任何字符数/行数。这取决于你的角色是什么。 – halfer 2015-02-11 12:00:00

这样做的原因是什么？将文本转换为图像只会增加页面的开销。 – 2015-02-11 12:02:46

我会改变该链接的背景色和前景色到不以你的形象出现，并使用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处。

你可能想要做一个链接的时间，并重新渲染，或多个链接。如果您执行多个链接，请提出另一个关于在图像中查找多个斑点的问题，或者搜索其他答案（由我执行），其中包含connected-components。如果您遇到问题，比如，如何选择未使用的颜色，或找到多个斑点，只是问了另一个问题 - 它们是免费的:-)

如果你有多个环节，更是这样的：

<!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如上然后anayse这样的：

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。

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

来源

2015-02-11 12:03:27

不生成“切片”（图片大小调整）仍然是一个问题，你不能仅仅为blob（s）生成图像，任何一方也必须完成，这会产生类似的问题？我，可能是错的？感谢您的时间和精力，我会研究这种方法！ – Benjamin 2015-02-11 13:49:10

我已经添加了一些关于多个斑点的更多信息以及如何将它们裁剪出来 - 对链接旁边的区域使用相同的逻辑。 – 2015-02-11 14:24:25

感谢您明天再次感谢您，再次感谢您！ – Benjamin 2015-02-11 16:02:58

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

image map docs

来源

2015-02-11 12:01:00

一旦所有的图像被写入pdf文件，图像映射将无法工作，对不起，我遗漏了这是一个如此大的项目，并解释这一切都是一个问题，感谢您的输入，并保证等宽域的东西将工作！ – Benjamin 2015-02-11 13:41:49

其实也许你可以:)现在看着它！ – Benjamin 2015-02-11 13:52:21

那么看来你正在做的不是太多将文本转换为转换HTML略多（也许只有文本：您可以使用ImageMagick的crop的工具，像这种作物的那些，片两侧，出形象HTML），因为你有能力有一个链接。而且由于你在谈论一个宽度的div，你还需要进行换行（本身实际上比听起来更难）。当你开始进入这样的事情时，你会开始越来越多地在HTML解析器中寻找。

那不是一个图像映射就够了？

你打算当链接跨越多行干什么？或非英语语言（某些语言从右向左阅读而不是从左向右阅读）？

一个图像映射是我最初的选择，那么，如果这是不能接受的话，我会建议把从PHP客场以不同的语言（我会建议使用Java）。

你能否提供你正在试图建立更广泛的项目的一些细节？

来源

2015-02-11 12:09:01

词语包装是一个巨大的问题，因此跨越两条线的链接也是如此，因此为什么我希望逐行检测在线上，那么我们可以假设链接继续，至于链接它将两个相同链接的图像。更广泛的项目是将文本覆盖在背景图像上，并将其写入pdf中。 – Benjamin 2015-02-11 13:35:18

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

回答

相关问题