Create Picture IDs with Name Tags Using PHP

PHP can be used to write text to images or even merge a source image to a target image. With this concept, it is possible to create open source ID creation software. The ID can contain a picture of a person and a name tag written in text (or even include an ID number). Keep reading to learn how this can be done.

To develop and use this application, you will need to have the following:

An ID image template – This will contain a company logo and the text input fields.  See sample screen shot below:

The picture of the person can be inserted/merged into the spacious area at the right of the image ID template.

To create this template, you can use MS Powerpoint or any image editor, such as in this example: http://www.php-developer.org/wp-content/uploads/tutorials/idtemplate.ppt

You’ll need to take a screen shot and crop/cut it to the following specifications:

  • Pixel dimensions: 1015 x 642 pixels
  • Print size: 85.94 x 54.36 millimeters
  • Resolution: 300 x 300 ppi
  • Color Space: RGB Color
  • File type: PNG
  • Filename: idtemplate.png

ID Picture of the person - You can use a colored ID picture. The specifications are as follows:

  • Pixel dimensions: 260 x 300 pixels
  • Print size: 22.01 x 25.40 millimeters
  • Resolution: 300 x 300 ppi
  • Color Space: RGB Color
  • Filename: personid.png

Font type file for the text - This should be a .TTF file. There are lots of websites that allow you to download fonts, such as http://www.webpagepublicity.com/free-fonts.html

You need to create a folder named ”opensourceidcreator” and place the following files inside this folder:

a. font file example ambient.ttf

b. idtemplate.png

c. personid.png

d. index.php (a blank .php file to be edited and discussed in the next section)

{mospagebreak title=PHP Script to Write Text and Merge Images}

I have found a basic tutorial regarding the use of PHP to write text on images using the GD function/library here: http://blog.ninedays.org/2007/11/29/writing-text-to-images-with-php/. This was coded originally by Terri Ann in her post: “Writing text to Images with PHP.”

Let’s modify the source code at the above link to fit this application. Since this application uses GET statements, the input to PHP can be found in the URL (variables are bolded):

Example:

http://www.php-developer.org/opensourceidcreator/?name=Codex Meridian&idnumber=694569

You can improve this application by adding a web form and asking users to input their name and id number. You can even ask them to upload their image (as long as it conforms to the above listed specifications above) and template. But these features are not currently included in this tutorial.

For the purpose of illustrating the basic concept, we will focus on the PHP side of the application.

The following is the PHP script (comments and discussions in blue):

<?php 

// Set the environment variable for GD. It’s useful for preventing GD related errors; read Item 4 below.

 

putenv(‘GDFONTPATH=’ . Realpath(‘.’));

//Credits:

//Original code by Terri Ann "Writing text to Images with PHP" found here: http://blog.ninedays.org/2007/11/29/writing-text-to-images-with-php/

//Version 1- Improvement by Codex-m at PHPdeveloper.org to:

//1. Write more than one text from the user to be parsed to the PHP by two GET statements

//2. Allow merging of an additional image with the ID picture template, which is the person’s ID picture.

//3. Assign new variables for the new text and images to be added.

//4. Add important line at the top:

// putenv(‘GDFONTPATH=’ . realpath(‘.’));

// This will prevent "Warning: Could not find/open font problem resulting to Error: The server could not create this image."

// Check if the variables are not empty or else return an error.

if((empty($_GET['name']))&&(empty($_GET['idnumber']))) fatal_error(‘Error: No text specified.’) ;

//Parse inputs using two GET statements and assign to a PHP variable.

//Use HTML_Entity_decode to convert all HTML entities to its applicable characters.

//Use PHP trim command to remove spaces at the beginning and the end of the inputs.

$name = trim(html_entity_decode($_GET['name']));

$idnumber = trim(html_entity_decode($_GET['idnumber']));

//Validate if name is a string and Id number is numeric.

if((!is_string($name))&&(!(is_numeric($idnumber))))

fatal_error(‘Error: Text not properly formatted.’) ;

      

//CUSTOMIZABLE: Declare and define the font file, font size, colors, image file name and template name.

$font_file       = ‘ambient.ttf’;

$font_size    = 33 ; // font size in pts

$font_color   = ‘#000000′ ;

$image_file   = ‘idtemplate.png’;

$image_file1    = ‘personid.png’;

      

//CUSTOMIZABLE: Define x-y coordinates for the Name Text to be written to idtemplate.png

$x_finalpos   = 500;

$y_finalpos   = 425;

  

//CUSTOMIZABLE: Define x-y coordinates for the ID number text to be written to template.png

//Note: Coordinates are dependent on the size of the image template

$x_finalpos1  = 500;

$y_finalpos1  = 525;

  

//Declare image file extensions in PNG format.

$mime_type           = ‘image/png’ ;

$extension           = ‘.png’ ;

  

//Check for server GD support

if(!function_exists(‘ImageCreate’))

fatal_error(‘Error: Server does not support PHP image generation’) ;

  

//Check font file availability

if(!is_readable($font_file)) {

fatal_error(‘Error: The server is missing the specified font.’) ;

}

  

//Define font colors

$font_rgb = hex_to_rgb($font_color) ;

  

//Define the bounding box coordinates for name text using the Truefonttype font file specified       

$box = @ImageTTFBBox($font_size,0,$font_file,$name) ;

  

//Define the bounding box coordinates for ID number text using the Truefonttype specified.

$box1 = @ImageTTFBBox($font_size,0,$font_file,$idnumber) ;

  

//Define name width and height

$name_width = abs($box[2]-$box[0]);

$name_height = abs($box[5]-$box[3]);

  

//Define ID number width and height

$text_width1 = abs($box1[2]-$box1[0]);

$text_height1 = abs($box1[5]-$box1[3]);

  

//Create an image from ID template PNG and assign to $image variable

$image =  imagecreatefrompng($image_file);

  

//Create an image from person’s picture ID PNG and assign it to $personid variable

$personid = imagecreatefrompng($image_file1);

  

//CUSTOMIZABLE: Merge the ID picture of the person to the ID template in a specific coordinates.

//You can read about imagecopymerge function manual here: http://php.net/manual/en/function.imagecopymerge.php

imagecopymerge($image, $personid, 717, 259, 0, 0, 253, 300, 100);

//Check if the server cannot create the image and displays error.

if(!$image || !$box || !$box1)

{

fatal_error(‘Error: The server could not create this image.’) ;

}

  

//Allocate color of the image and then measure the image width

$font_color = ImageColorAllocate($image,$font_rgb['red'],$font_rgb['green'],$font_rgb['blue']) ;

$image_width = imagesx($image);

  

//Finalize the position of the name text on the generated image.

$put_text_x = $image_width – $name_width – ($image_width – $x_finalpos);

$put_text_y = $y_finalpos;

  

//Finalize the position of the ID number text on the generated image

$put_text_x1 = $image_width – $text_width1 – ($image_width – $x_finalpos1);

$put_text_y1 = $y_finalpos1;

  

// Write the NAME text to the image

imagettftext($image, $font_size, 0, $put_text_x,  $put_text_y, $font_color, $font_file, $name);

  

//Write the ID NUMBER text to the image

imagettftext($image, $font_size, 0, $put_text_x1,  $put_text_y1, $font_color, $font_file, $idnumber);

  

//Declare header content type in PNG

header(‘Content-type: ‘ . $mime_type) ;

  

//Output the generated PNG image with the text to the browser

imagepng($image) ;

  

//Destroy image to prevent memory leak and then exit.

ImageDestroy($image) ;

exit ;

/*

The FATAL error function will

attempt to create an image containing the error message given.

If this works, the image is sent to the browser. If not, an error

is logged, and passed back to the browser as a 500 code instead.

*/

function fatal_error($message)

{

// send an image

if(function_exists(‘ImageCreate’))

{

$width = ImageFontWidth(5) * strlen($message) + 10 ;

$height = ImageFontHeight(5) + 10 ;

if($image = ImageCreate($width,$height))

{

$background = ImageColorAllocate($image,255,255,255) ;

$text_color = ImageColorAllocate($image,0,0,0) ;

ImageString($image,5,5,5,$message,$text_color) ;   

header(‘Content-type: image/png’) ;

imagePNG($image) ;

ImageDestroy($image) ;

exit;

}

}

// send 500 code

header("HTTP/1.0 500 Internal Server Error") ;

print($message) ;

exit ;

}

/*

Decode an HTML hex-code into an array of R,G, and B values.

Accepts these formats: (case insensitive) #ffffff, ffffff, #fff, fff

*/   

function hex_to_rgb($hex) {

// remove ‘#’

if(substr($hex,0,1) == ‘#’)

$hex = substr($hex,1) ;

// expand short form (‘fff’) color to long form (‘ffffff’)

if(strlen($hex) == 3) {

$hex = substr($hex,0,1) . substr($hex,0,1) .

substr($hex,1,1) . substr($hex,1,1) .

substr($hex,2,1) . substr($hex,2,1) ;

}

if(strlen($hex) != 6)

fatal_error(‘Error: Invalid color "’.$hex.’"’) ;

// convert from hexidecimal number systems

$rgb['red'] = hexdec(substr($hex,0,2)) ;

$rgb['green'] = hexdec(substr($hex,2,2)) ;

$rgb['blue'] = hexdec(substr($hex,4,2)) ;

return $rgb ;

}

?>

{mospagebreak title=Demo Project Implementation}

To fully implement this project in a working environment, you need to enable a lot of functions — for example, the GD Library set of functions.

To implement this project in a production environment (although some features can still be added and improved for best user experience), you need to put four files inside the “opensourceidcreator” folder: ambient.ttf, idtemplate.png, index.php and personid.png.

You can customize the fonts by replacing ambient.ttf, as well as the idtemplate.png and personid.png. Of course, you need to revise the scripts to reflect these changes.

Here is a screen shot of the folder:

 

Next, upload the folder to the root directory of website supporting Apache-Linux web server.

You can even test this first on a local XAMPP server.

Third, open the URL in the browser, if you have a domain. For example, if your domain is myphpprojectdomain.com , then it will be:

http://www.myphpprojectdomain.com/opensourceprojectcreator/?name=Your Name&idnumber=121455

Of course, as stated earlier, you can further improve this application by adding a web form that allows users to input their name and id number, and accepts image templates and an ID picture.

A complete working application can be found here:  http://www.php-developer.org/opensourceidcreator/?name=Codex%20Meridian&idnumber=694569 

Since name and idnumber are the input variables for the PHP script, you can change it to anything you like, and it will be written to the ID image template shown in the browser. So If I revise this to:

name=John Doe

idnumber=78954

Then the URL will be http://www.php-developer.org/opensourceidcreator/?name=John%20Doe&idnumber=78954 

Your browser output should look like:

Finally, you can right click on the image and save it to your desktop. Once saved, you can resize it to standard ID card size, and then print it. After that, you can laminate the card to make it your identification card. The advantage of this is that you can share it with your friends in other places without needing to install third party application software — if you enable them to upload image files and enter their own names and ID number on a website where this project has been hosted.

Aside from creating ID pictures with a name tag, you can also use this application to create business cards or calling cards using PHP.

You can download the complete PHP project files from here: http://www.php-developer.org/wp-content/uploads/tutorials/opensourceidcreator.zip 

[gp-comments width="770" linklove="off" ]
antalya escort bayan antalya escort bayan