CODEWITHSUNDEEP
phphtmlimagegd
Benjamin
Benjamin

Reputation: 655

How to convert text to (mutiple) images exactly?

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):

enter image description here

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).

enter image description here

Upvotes: 1

Views: 137

Answers (3)

Mark Setchell
Mark Setchell

Reputation: 208077

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:

enter image description here

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

Upvotes: 3

Damian Nikodem
Damian Nikodem

Reputation: 1289

Well it seems that you are doing slightly more than converting text as much as converting HTML (maybe text only HTML) since you have the ability to have a link. And since you are talking about a div with a width you also need to perform word-wrapping (which in itself is actually harder than it sounds). When you start getting into things like that then you will start looking more and more at a HTML parser.

Wouldn't a imagemap suffice ?

What do you plan on doing when a link spans multiple lines? or non-english languages (some languages are read right to left instead of left to right)?

A imagemap is my initial choice, then if that's not acceptable then I would suggest moving away from PHP to a different language (I would recommend Java).

Can you provide some more details about the broader project you are trying to put together?

Upvotes: 0

Markus M&#252;ller
Markus M&#252;ller

Reputation: 2641

Have you considered using image map? With an image map you can define clickable hot-spots in an image. This way there would be no need to cut the image into multiples. The calculation of the link's coordinates should be possible the way you detailed in your question. As long as the font is monospaced (refering to halfer's comment)

image map docs

Upvotes: 0

Related Questions