Instant Sample

[oodya]

Hi All,

What I am trying to do, is that on my server, I have a number of images. I would like for a potential customer to be able to modify the text on a particular image. E.g. there are images of Engagement Card. I would like a potential bride / groom to go onto the site - select the card that they like - for them to then use a form to enter the relevant details (e.g. Their name, venue, dates etc) - and then for the computer to talk to the server and for the image to be re-generated with their details on.

I have no idea where to start for something like this so any help would be much appreciated.

Thanks.

[nobackseat88]

With a lot of PHP GD, it could be done.

Look it up, I can't make the code right now.

[mlseim]

Yes, PHP GD ...

But, only for a quick sample.
The final image it produces won't be good enough quality for an official download file.

Do you really mean sample, or are you planning on rendering the final image?

Just out of curiosity, give us a link to one of your sample cards.

[oodya]

Hi,

I have attached the image.

Thanks for your help

[nobackseat88]

Ooh,that's going to be real tough. :\

Make the image without all the text, and then take the string submitted by the user and align it accordingly in each area, presumably, the same cursive font.

[mlseim]

Also ...
The font you use must be available as a .ttf file
What is the font you are using?

And NBS88 is correct ... we need the image without the text,
(but seeing the text shows us what it is supposed to look like).

[oodya]

Hi,

Thank you for your replies. I have attached the image without any text.

Thanks.

[mlseim]

What is the name of that font you used?

[nobackseat88]

if ($_SERVER['REQUEST_METHOD'] == 'POST'){
    $image = ImageCreateFromPNG("URLOFIMAGE.PNG");
    $color = imagecolorallocate($image, 0xFF, 0xFF, 0xFF);
    $colorShadow = imagecolorallocate($image, 0x66, 0x66, 0x66);
    $font = 'arial.ttf';
    $fontSize = "10";
    $fontRotation = "0";
    $str = $_POST['fieldnamefortext'];

    /* Shadow */
    ImageTTFText($image, $fontSize, $fontRotation, 7, 22, $colorShadow, $font, $str);

    /* Top Level */
    ImageTTFText($image, $fontSize, $fontRotation, 5, 20, $color, $font, $str);

    header("Content-Type: image/PNG");
    ImagePng ($image);
    imagedestroy($image);
} else {

    the form stuff here, make sure it's POST

}

This is something I quickly grabbed from the internet. Try editing it to your needs, and let us know if you need any help.

[oodya]

Hi,

There are 2 different fonts used - but can make do with only one. The names of the font is Amazone and Adorable.

Thanks a lot for both your help - I will definitely be trying your suggestions.

Thanks again.

[mlseim]

Check back tomorrow AM.
I can make a real example using your image,
but this does take some time to do.

[oodya]

Thanks very much for both your help.

Bedtime for me.

Thanks again.

[mlseim]

Here is my working test site ....

I only did the names at the top, but you can see by the script shown
that you duplicate the sections with different X/Y coordinates and font sizes.
You can also mix fonts and font colors if you upload the correct .ttf file(s).

No validation shown, so you need to limit textbox lengths, etc.

This is just a basic PHP GD example:

http://qbotz.com/card_sample/

Have fun!

EDIT:
And best of all, the output is an actual JPEG image, so you can store it, serve it, resize it,
make a thumbnail, attach to email, etc. ... do anything you want with it. Just realize that
the quality will not be as good as a "real" card. Also, you can see that creating the rest of
the card will require tedious positioning. Making other cards will take a lot of time to create.
I'm wondering if simply using "sample" cards with fake names might not be the better solution.

The only silver lining to using a form (and PHP GD), is that you could save the form information
in a database ... example, the client will be giving you all the information to use on the real cards.
So maybe it would be a good thing to use. Saving all of the data is a whole other thing not yet
described, and then you would need an admin section to view the data.

You might want to hire a freelance programmer, if this is part of a business you do.
The money you spend would then be a tax write-off.


.

[nobackseat88]

Nice mlseim!

oodya, don't forget to cleanup and validate your post variables before using it live though.

[oodya]

That looks exactly like something I was looking for. Now the difficult part for me - to try doing the same to some of my other images. Can you please leave that example on your site for the time being?

Thanks,