Editing images with PHP (Creating a custom certificate for users)
To show you how to edit images in PHP we are going to create a script which takes a couple of arguments (such as the certificate recipient’s name and the issuer name and some text describing what the certificate is for) and both displays and saves the certificate as a file.
The images below show how the application work:
The project’s file structure consists of a certificate.php file which will be responsible for creating the certificate, an index.php file where users would fill the data necessary for the certificate and where the certificate will be displayed. The project also contains a templates folder with a single image which contains the template of the certificate which is the certificate’s frame without filled text and an img folder with a certs subfolder which contains all the generated certificates.
Generating certificates with Certificate.php
We create a function which takes three parameters; the name of the certificate recipient, the thing for which he is recognized and the name of the person who gives the certificate. Thereafter, we check if any of the fields is too long and stop further execution in that case.
1 2 3 4 5 6 7 | function fetchCertificate($name = “Huzoor Bux”, $recognition = “entrepeneurship and skills in Web Development”, $creatorName = “Ivan Dimov” ) { if (strlen($name) > 255 || strlen($recognition)> 255 || strlen($creatorName) > 255) { return; } |
Thereafter, we store a new image resource using the imagecreatefrompng built-in function and pass it the path to our certificate template.
1 2 3 | // Create the image $im = imagecreatefrompng(‘templates/blank.png’); |
We proceed by defining a few variables. $fontSize would contain the default font size that we will be using for our text, the $font variable would contain the path to our custom font file and $black would be used to add black color to the text – we use imagecolorallocate and pass it the image resource and the usual rgb values in the subsequent parameters (the color corresponds to rgb(25,25,25))
1 2 3 4 5 | $font = ‘fonts/arial.ttf’; $black = imagecolorallocate($im, 25, 25, 25); $fontSize = 15; // Font size is in pixels. |
Afterwards, we retrieve the image’s width using the imagesx built-in (by passing it the image resource).
1 | $imageX = imagesx($im); |
We use the image’s width to horizontally center some of the text in the image.
To display the certificate recipient’s name, we get the edges of the text with the recipient’s name using imagettfbbox. To properly calculate the edges, you would need to pass it a valid font size, edge, a path to a font file and the desired text. After we know the edges of that text, we add the left edge to the right edge to get the text’s width (imagettfbbox would return an array with the edges as different numeric keys).
Finally, we display the text using imagettftext. We pass it the image resource, the desired font size, the edge, the x position (for x we subtract the width of the text from the image’s width and divide it by 2 so the text would be centered), the y position, the desired color (the color takes a return value from imagecolorallocate) and as a last argument – we pass the text that we want to be displayed.
1 2 3 4 5 | $textWidth = imagettfbbox($fontSize, 0,$font, $name); $textWidth = $textWidth[0] + $textWidth[2]; imagettftext($im, $fontSize, 0, ($imageX – $textWidth) / 2, 475, $black, $font, $name); |
Thereafter, we repeat this process a few more times with the different types of text (we pass different text and y position)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | //get another width $textWidth = imagettfbbox($fontSize, 0,$font, $recognition); $textWidth = $textWidth[0] + $textWidth[2]; imagettftext($im, $fontSize, 0, ($imageX – $textWidth) / 2, 575, $black, $font, $recognition); //get the width of the programmer word $textWidth = imagettfbbox($fontSize * 2, 0,$font, “Programmer”); $textWidth = $textWidth[0] + $textWidth[2]; imagettftext($im, $fontSize * 2, 0, ( $imageX – $textWidth) / 2, 350, $black, $font , “Programmer”); imagettftext($im, $fontSize, 0,680 , 670, $black, $font, date(“Y/m/ imagettftext($im, $fontSize, 0, 330 , 670, $black, $font, $creatorName); |
Finally, to display the image we set the Content-Type header to image/png and echo the image resource with the imagepng built-in function. This will display the image in the browser.
1 2 3 | header(“Content-Type: image/png”); echo imagepng($im); |
Now, all we have to do is save the image to a file which we do with the same function (imagepng) but we pass it a second argument which would be the path where we want the file to be stored.
1 2 3 4 5 6 7 | //save the image in a file imagepng($im,“img/certs/” . $id . “.png” ); imagedestroy($im); } |
Allowing users to craft their certificate
To do this, we add a few lines of PHP to index.php. We check if the request method is POST and If all parameters are set, we call the function that we just built and pass it the user inputs.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php if (isset($_POST[‘name’]) && isset($_POST[‘recognition’]) && isset($_POST[‘your-name’])) { require_once(“certificate.php”); fetchCertificate($_POST[‘name’], $_POST[‘recognition’], $_POST[‘your-name’]); } else { ?> |
If the request method is not POST (the user has not submitted our form) we create a form which urges the user for the inputs necessary for the certificate.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <title>Document</title> </head> <body> <h1>Create a personalized Best Programmer certificate</h1> <form action=“” method=“POST”> <label for=“name”>The certificate recipient‘s name: </label> <input id=“name” type=“text” name=“name” placeholder=“Huzoor Bux”><br> <label for=“recognition”>What kind of programming freak the recipient is? (In recognition of) </label> <input id=“recognition” type=“text” name=“recognition” placeholder=“entrepeneurship and skills in Web Development”> <br> <label for=“your-name”>Who are you? (Your name)</label> <input id=“your-name” type=“text” name=“your-name” placeholder=“Ivan Dimov”> <br> <input value=“Get your certificate” type=“submit”> </form> </body> </html> <?php } ?> |
Tutorial Categories:
Tutorial Categories:
Very interesting script. Thank you very much.
nice script and very usefully, GOD bless you
how to download demo ?
Please Give A zip of full application
With all thing you did in this tutorial.
Its Request Plz Give me link to download.