PHP Text Input to Image, Newsletter

[FlannelBeard]

Greetings everyone, FlannelBeard here.

 

Bit new to this community, but planning on sticking around!

 

I work for a marketing company as the lead programmer, but I am stumped when it comes to this application I am developing for Facebook's iFrame Canvas.

 

This is the set up of what I need.

 

GREAT TACOS restaurant is handing out coupons for anyone who "likes" the facebook page. To get the coupon, the user (after liking the page) can input his or her name and email into input boxes.

 

Instead of having our other web designer receive these emails and manually (photoshop) insert their names into the designated area on the image and emailing them, i was hoping there was a way through PHP or Java to automate this system.

 

User inputs name and email > watermarks text input over this image http://www.whatsnextmarketing.com/Applications/Coupon/Elements/Coupon-Showcase.png > automatically emails the coupon with their name / email over the picture upon hitting "submit".

 

Is this possible? I will share source for all when I complete this project (with everyones help of course )

 

I am pretty good at designing tutorials, so when this project is completed I will start a new topic in another section and design a nice tutorial with source and download for anyone interested.

 

Please help me out, I am stumped and yet I know this is a very simple process...

 

-FlannelBeard, friend and fellow community developer.

 

[Maq]

FlannelBeard, I deleted your other thread.  Do NOT double post, even if it's in 2 different sections.

[gizmola]

FlannelBeard,

  What you want to do can be done fairly easily using the GD Functions.  You will need the freetype extension as well.  Take a look at the manual and if you have specific questions let me know.  It will allow you to load in your base image and draw text on it, and return a customized version.  You can save the image first and return it, or just return it directly to the browser.  GD is the basis of most of the graphing and charting libraries out there, and in general is just great stuff.

 

http://us.php.net/manual/en/book.image.php

[FlannelBeard]

Maq, my sincere apologies. Wont happen again. Wasnt sure which one to post

 

Gizmola, never knew this even existed!! I have dabbled in PHP but never authored anything. Honestly, I have no clue where to begin. But, being proactive and smart, i thought id try to theorize all of this together. (Great resources btw, thank you very much!)

 

Based on the information given I assume that I can use this function to start (added an existing script to this):

 

<?php
// Load the stamp and the photo to apply the watermark to
$im = imagecreatefromjpeg('photo.jpeg');

// Set the margins for the stamp and get the height/width of the stamp image
$marge_right = 10;
$marge_bottom = 10;
$sx = imagesx($stamp);
$sy = imagesy($stamp);

// Merge the stamp onto our photo with an opacity (transparency) of 50%
imagecopymerge($im, $stamp, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy - $marge_bottom, 0, 0, imagesx($stamp), imagesy($stamp), 50);

// Save the image to file and free memory
imagepng($im, 'photo_stamp.png');
imagedestroy($im);

// Path to our ttf font file
$font_file = './arial.ttf';

// Draw the text 'PHP Manual' using font size 13
imagefttext($im, 13, 0, 105, 55, $black, $font_file, 'PHP Manual');

// Output image to the browser
header('Content-Type: image/png');

imagepng($im);
imagedestroy($im);
?>

Now, instead of overlaying an image to the base image, I need to input text in its place.

 

1. Need to know the html for the input and submit buttons so that it links with the php script

2. Need to place the input text over the image, merge it, and output it to a new tab on the browser so they can download it.

 

I, unfortunately, do not know the script on this...I understand the theory, though, and Im learning really fast as I go.

 

Any help will be appreciated and full source will be posted for this application with a detailed tutorial when I get this up and running. We are a community, after all

 

Thanks a million so far, Im submitting this now but im still doing research. Any help would be most welome!

 

-FlannelBeard

 

[Maq]

In the future, please use

tags around your code.

[FlannelBeard]

More apologies haha, im learning.

[gizmola]

Looks like you have a start going, using the imagecreatefrom... 

 

You just need to add in the writing part ->  http://us.php.net/manual/en/function.imagettftext.php

 

There are things in the code you pasted that involve what appears to be adding a watermark image, but it doesn't look like you need that.  Also whatever image type you are starting with (png, jpeg or gif) you would want to stay with that image type throughout.  Since your base image is a png, then stay with that.

 

As for a button, you just need an html form, or javascript attached to a button.  That's not really a php question, but if there's something specific to php rendering of that content let us know once you have something started.

 

Your script, which is the one you have already started, should be something like getimage.php or whatever makes sense for your system.  I'm not clear from your description of how the script will get the parameters it needs in terms of knowing what needs to be written to the image or any inherent security or control concerns, since this involves the facebook/like system.  One way that might make sense is to have this button pass a url parameter of the person's facebook id, or whatever is available from the facebook api.  I haven't done anything with facebook so I can't speak to that from firsthand knowledge.  I think it's safe to have that passed as a url parameter, so in php you get something like that in php from the $_GET[] superglobal.  So if your url generated was something like:

 

getcoupon.php?fid={facebook id}

 

then inside getcoupon.php you'd get it via $_GET['fid'].

 

 

When you generate the image and write the text to it, you can just return it directly after you set the headers.  Something like this should work:

 

$file = 'tacocoupon.png';
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=$file");
header("Content-Type: image/png");
header("Content-Transfer-Encoding: binary");
imagepng($im);

 

 

 

 

 

 

[FlannelBeard]

gizmola,

 

I just copied and pasted that code above, I know there were errors but it was a starting point JUST to get the idea across also, sorry for the late reply.

 

Also, to answer a brief question, facebook can do anything a regular website can now (ecommerce, fan gates, dynamic content, full html css apache ajax coldfusion php etc...).

 

The html would look something like this:

 

index.php

<form name="input" action="getcoupon.php">
Full Name: <input type="text" name="name" />
Email: <input type="text" name="email" />
<input type="submit" name="submit" value="Submit">
</form>

 

I want to be able to take the text the user inputs and overlay it on the image and output the final result on a new tab in the browser for them to download.

 

So now what I have is: (script corrected)

 

getcoupon.php

<?php

// Load the stamp and the photo to apply the watermark to
$im = imagecreatefrompng('Elements/coupon.png');

// Set the content-type
header('Content-type: image/png');
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=$file");
header("Content-Transfer-Encoding: binary");

// The text to draw
$name = 'Testingg...';
// Replace path by your own font path
$font = 'arial.ttf';

// Add some shadow to the text
imagettftext($im, 20, 0, 11, 21, $grey, $font, $name);

// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $name);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
?>

 

The link is here: http://apps.facebook.com/couponapplication/

 

The download source is here: whatsnextmarketing.com/Applications/Coupon.zip

 

It's not working, not sure what to do next... I put all of what I knew into this so far, learning as I go.

 

Please, sir, can I 'ave some more? 

 

Thanks,

 

-FlannelBeard

 

[attachment deleted by admin]

[FlannelBeard]

Anyone find anything on this? I havent had time to work on it more. I should be able to engage it again in a few hours, so any help before hand would be splendid!

[gizmola]

We really need more info beyond "not working".  Are there errors? 

[FlannelBeard]

When I access the page with the inputs, enter my name and email and hit submit, the page does not change. I have an action set to go through my coupon PHP script, but it does absolutely nothing. I am not sure why nothing comes up after I hit submit.

 

Second error that I know of is that I cannot find the codes to position where those texts would be over my image.

 

Spent 2 hours today on it, not sure what im doing wrong. Why wont it open up a page with the base image at the very least? Argh, frustrating.

[ThomasKluge]

Just changed the code that it works for me:

 

changed everything to lowercase for convenience ....

 

index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<form name="code_input" enctype="application/x-www-form-urlencoded" method="GET" action="getcoupon.php">

Coupon code: <input class="text" type="text" size="24" name="coupon_code" value="" />
<input type="submit" name="submit" value="submit">
</form>

</body>
</html>

 

 

getcoupon.php:

<?php
// Load the stamp and the photo to apply the watermark to
$im = imagecreatefrompng('elements/coupon.png');

// Set the content-type
header('Content-type: image/png');
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=coupon.png");
header("Content-Transfer-Encoding: binary");

$coupon_code = "empty code";

if(isSet($_GET['coupon_code']))
{
   $coupon_code = $_GET['coupon_code'];
}

// Replace path by your own font path
$font = 'arial.ttf';

$black = ImageColorAllocate ($im, 0, 0, 0);
$grey = ImageColorAllocate ($im, 128, 128, 128);

// Add some shadow to the text
imagettftext($im, 20, 0, 647, 351, $grey, $font, $coupon_code);

// Add the text
imagettftext($im, 20, 0, 646, 350, $black, $font, $coupon_code);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
?>

 

 

[attachment deleted by admin]