如何將文本轉換爲（多個）圖像？

我試圖將內容，圖像，文本和鏈接的頁面轉換爲完全圖像，如果不是鏈接必須保持不變（仍然有效）的事實，這將很容易完成（我已經玩過想法轉換鏈接到硬文本，以便他們可以閱讀，但改變了內容的佈局方式）。如何將文本轉換爲（多個）圖像？

這兩個文本和圖像將使用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

如何將文本轉換爲（多個）圖像？

回答

相關問題