我正在尝试将内容,图片,文字和链接的页面转换为单独的图像,如果链接必须保持不变(仍然有效),这将很容易实现(我有玩弄了将链接转换为硬文本的想法,以便可以阅读,但这会改变内容布局的方式。
文本和图像都将使用Inconsolata,因为它是"Monospaced font",它允许我们假设每行有66个字符,前提是字体设置为18px,最大容器(div)为595px
我的计划是计算角色数量,并获得创建图像的尺寸和#34;切断链接"相关问题:How to count characters on a single html line with PHP。
我所谈论的一个小例子就是转换下面的文字(当前假装它的文字):
使用PHP或任何可以快速完成工作的Web语言,找出链接的位置,并创建允许新图像版本包含工作链接的图像,并且与文本版本完全相同和功能(链接)。
答案 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文件:
然后使用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的评论)
答案 2 :(得分:0)
好吧,看起来你做的不仅仅是转换文本和转换HTML(可能是纯文本HTML),因为你有能力拥有一个链接。而且由于你在谈论宽度为div的div,你还需要执行自动换行(这本身实际上比听起来更难)。当你开始涉及这样的事情时,你会开始越来越多地在HTML解析器上看。
图像映射不够吗?
当链接跨越多行时,您打算做什么?或非英语语言(某些语言是从右到左而不是从左到右阅读)?
图像映射是我最初的选择,如果那是不可接受的话,我会建议从PHP转移到另一种语言(我会推荐Java)。
您能否提供一些有关您想要整理的更广泛项目的更多详细信息?