Issue
I am trying to convert pages of content, images, text and links to solely images, this would be easily done if it weren't for the fact the links have to stay the same (still work) (I have toyed with the idea converting links to hard text so they can be read but that changes the way the content's layout).
Both the text and images will use Inconsolata because it is a "Monospaced font" which allows us to assume that there will be 66 characters on each line providing the font is set to 18px and the max container (div) is 595px.
My plan was to count the characters and to get the sizes for creating the images and "cutting up the links" related question: How to count characters on a single html line with PHP.
A small example of what I am talking about would be to convert text like below (pretend it's text currently):
And using PHP or any web language that will do the job fast, work out where the link(s) are and to create images that allow the new image version to contain working links and is exactly identical to the text version in looks and function (links).
Solution
I would change the link background and foreground colour to a colour that does not occur in your image and render the page using webkit2png. Then find the blocks of colour corresponding to your link colour using ImageMagick to make an image map.
So, in concrete terms, let's say you change your HTML to set the foreground and background colours of links to red (#ff0000) so your HTML looks something like this:
<p>
A link to Google follows:
<a style="color:#ff0000;background:#ff0000" href="www.google.com">Google</a> - a link to Google.
</p>
Then you do
webkit2png a.html
which gives you a PNG file like this:
You then use ImageMagick to colour everything not red to black, like this:
convert fileUsersmarktmpahtml-full.png -colorspace RGB -fill black +opaque "#ff0000" x.png
Then you tell ImageMagick to trim the background, leaving the red block only, and look at its coordinates with identify and you can see where the link is to get the coordinates for your image map.
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
You can see the red block is at offset +176+16 into the image.
You may want to do one link at a time, and re-render, or multiple links. If you do multiple links, either ask another question about finding multiple blobs in an image, or search for other answers (by me) with the words connected-components in them. If you get stuck, say, on choosing unused colours, or finding multiple blobs, just ask another question - they are free :-)
If you have multiple links, more like this:
<!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>
You run the webkit2png as above and then anayse like this:
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
Output
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)
Now you can see the blobs corresponding to the links in the second and third rows. You can crop those, and the pieces either side, out of the image using ImageMagick's crop tool like this:
convert input.png -crop 121x18+357+50 firstLink.png
convert input.png -crop 47x18+140+16 secondLink.png
Answered By - Mark Setchell Answer Checked By - Marilyn (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.