Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

PHP GD2: Turn complex input into images with icons and varied text

Using the PHP GD2 library, I want to convert textarea user input with special symbols into single downloadable images that feature text and embeded images from the input.

Example input:

{k}{h} New Reign: <i>When the King of Hearts is played, all other players with a {h} card in their hand must discard one {h} card.</i>

Would create the following image:

enter image description here

Main features to implement:

  • Icon Embedding based on tags (Valid tags: {a}, {k}, {q}, {j}, {h}, {d}, {c}, {s})
  • Plain and italics text (font switching based on <i></i> tags)
  • Word wrapping inside the container of 600px wide
  • Newline aware to start a new block of text processing
  • Spacing needs to be dynamic if font sizes are changed (max-width problem)

Other valid input examples to test with:

When this card is played, all players holding a {q} may draw two cards after revealing that card. If that player has more than one, they may draw two cards for each.

Matched Pair: <i>If the {k} and {q} are played during the same turn, each of those players may exchange up to two cards.</i>

At the beginning of each players turn, he/she may draw a card from another players hand instead of 
drawing from the deck. If he/she chooses to do this, they may only have one action phase for 
the remainder of their turn.

Notes:

  • The solution must use GD2 methods to add text and images to the background (imagettftext, imagecopy, etc) (PHP v5.3.4)
  • Icons will be 42px x 42px png files, but just use placeholders (colored squares or shapes) in leui of the actual production images.
  • Typeface used doesn't matter, as long as it supports both italics and normal type.
  • Background and final image dimensions should be 600x300 with padding for the frame.

Background file for use

enter image description here

User Gravatar

Fyction

Posted Jun 28 2014 19:17 UTC

$100


  • Assigned To spywhere
  • Solved
  • php
    image processing
  • 739 Views

12 Replies


Can you provide a font and images for each type? Ace, King, Queen, Jack, Club, Spade, Diamonds, Heart

Would a form submitted into a direct image works?

User Gravatar

spywhere

Posted Jun 28 2014 20:08 UTC

Sure thing. I've added a fonts zip here: fonts and the symbols here: suit-images

Use the regular and italics fonts (ignore the bold).

User Gravatar

Fyction

Posted Jun 28 2014 20:39 UTC

Alright, I'm working on it right now. :)

User Gravatar

spywhere

Posted Jun 28 2014 22:52 UTC

Download here: Text2Image

Here's the screenshot of output image.

Font size: 22pt Font size: 22pt

Font size: 15pt Font size: 15pt

Settings can be configured inside generate.php file.

Please leave a reply if you have any problem with it.

User Gravatar

spywhere

Posted Jun 29 2014 0:51 UTC

Solution

This didn't solve your task? Get your own custom solution.

clean code! Put that in a class

User Gravatar

a53mp

Posted Jun 29 2014 1:43 UTC

Alright, I updated it. Download using the same link.

User Gravatar

spywhere

Posted Jun 29 2014 5:13 UTC

Testing this morning, thank you.

User Gravatar

Fyction

Posted Jun 29 2014 7:14 UTC

In some cases text seems to be wrapping when it doesn't need to be. The words "quadruples" and "effect" in the example below.

Case:

<i>Paired Teams</i> - Whenever a pair or quadruples enter the board, the last player to lay down cards may draw one card. <i>After this effect occurs, remove this card from play.</i>

Output: enter image description here

And there is also some slightly odd spacing after a few of the italics letters (f & y in the example).

User Gravatar

Fyction

Posted Jun 29 2014 8:53 UTC

The "quadruples" can be fixed by tuning "word_cutting_tune" variable (try set it to 0 or negative value). I'll looking up the "f&y" problem for you.

User Gravatar

spywhere

Posted Jun 29 2014 8:55 UTC

Thank you! I'm wondering if those problem characters could have a special handler, I changed the font to another italics typeface and ran into the same issue so no luck there. (Also to a lesser extent, the space between "p", "l" & "g" as well.)

enter image description here

User Gravatar

Fyction

Posted Jun 29 2014 9:56 UTC

Line 178 where you offset the character, I just added a conditional to handle italics special characters and add a negative spacing. (The problem was coming from the characters, but seems to be inherent to italics fonts.)

//special case f
$cx += $bbox[2]-6;

Everything else looks stellar, thank you for the amazingly quick turnaround! Answer accepted!

User Gravatar

Fyction

Posted Jun 29 2014 10:19 UTC

Alright, so happy coding!

User Gravatar

spywhere

Posted Jun 29 2014 16:28 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions