Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 33

Thread: Instant Sample

  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    49
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Instant Sample

    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.

  • #2
    Regular Coder
    Join Date
    Dec 2007
    Posts
    145
    Thanks
    5
    Thanked 5 Times in 5 Posts
    With a lot of PHP GD, it could be done.

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

  • #3
    Master Coder mlseim's Avatar
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,395
    Thanks
    8
    Thanked 1,078 Times in 1,069 Posts
    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.

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    49
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Image has been attached.

    Hi,

    I have attached the image.

    Thanks for your help
    Attached Thumbnails Attached Thumbnails Instant Sample-example-1.jpg  

  • #5
    Regular Coder
    Join Date
    Dec 2007
    Posts
    145
    Thanks
    5
    Thanked 5 Times in 5 Posts
    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.

  • #6
    Master Coder mlseim's Avatar
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,395
    Thanks
    8
    Thanked 1,078 Times in 1,069 Posts
    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).

  • #7
    New Coder
    Join Date
    Jul 2008
    Posts
    49
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Image with no text has been attached.

    Hi,

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

    Thanks.
    Attached Thumbnails Attached Thumbnails Instant Sample-example-no-text.jpg  

  • #8
    Master Coder mlseim's Avatar
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,395
    Thanks
    8
    Thanked 1,078 Times in 1,069 Posts
    What is the name of that font you used?

  • #9
    Regular Coder
    Join Date
    Dec 2007
    Posts
    145
    Thanks
    5
    Thanked 5 Times in 5 Posts
    Code:
    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.

  • Users who have thanked nobackseat88 for this post:

    oodya (05-06-2009)

  • #10
    New Coder
    Join Date
    Jul 2008
    Posts
    49
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Fonts used

    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.

  • #11
    Master Coder mlseim's Avatar
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,395
    Thanks
    8
    Thanked 1,078 Times in 1,069 Posts
    Check back tomorrow AM.
    I can make a real example using your image,
    but this does take some time to do.

  • #12
    New Coder
    Join Date
    Jul 2008
    Posts
    49
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thanks

    Thanks very much for both your help.

    Bedtime for me.

    Thanks again.

  • #13
    Master Coder mlseim's Avatar
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,395
    Thanks
    8
    Thanked 1,078 Times in 1,069 Posts
    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.


    .
    Last edited by mlseim; 05-06-2009 at 01:05 PM.

  • Users who have thanked mlseim for this post:

    oodya (05-06-2009)

  • #14
    Regular Coder
    Join Date
    Dec 2007
    Posts
    145
    Thanks
    5
    Thanked 5 Times in 5 Posts
    Nice mlseim!

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

  • #15
    New Coder
    Join Date
    Jul 2008
    Posts
    49
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Excellent

    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,


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •