Community Pick: Many members of our community have endorsed this article.

Framing images in PHP

Published:
Updated:
Would you like to upload an image and apply a frame over it? How about uploading an image and making it have round corners, similar to the image below:
Round corner imageThis can all be done within minutes! For this example I will be upload an abstract image (you can download this file here: http://www.ndesign-studio.com/images/portfolio/illustration/abstract-virus-1.jpg) and apply a brown frame to it, resulting in the following image:
Final framed imageThe following PNG image will be used as the frame (you can create your own frames, just be sure to leave the view area transparent, e.g. for the rounded image, you will create the edges as a frame, and when overlayed on the image, it will create the rounded image effect. I've attached this image for reference.):
PNG frame

1. Download the class library

Firstly, download the class that will handle the image upload and the image processing functions. You can download it here: http://www.hotscripts.com/Detailed/45364.html or at PHP Classes: http://www.phpclasses.org/browse/package/2181.html

2. Create a simple upload form

For this step, create a simple upload form in HTML. For this example I'm using a very simple form, you can change this to suit your needs:
<form action="upload.php" method="post" enctype="multipart/form-data">
                      <input type="file" name="file" />
                      <input type="submit" value="Upload" />
                      </form>

Open in new window

3. Creating the upload.php file


Now to create the file that will do all the work. Before you do this, ensure the frame image is in the same directory. Create the upload.php document and add the following code to it:
<?php
                      
                      include('class.upload.php');
                      
                      $handle = new Upload($_FILES['file']);
                      if ($handle->uploaded) {
                      	$handle->image_resize = true;
                      	$handle->image_x = 283;
                      	$handle->image_y = 221;
                      	$handle->image_ratio_crop = true;
                      	$handle->jpeg_quality = 100;
                      	$handle->image_watermark = 'frame.png';
                      
                      	$handle->Process('./');
                      	if ($handle->processed) {
                      		$filename = $handle->file_dst_name;
                      	}else{
                      		echo 'Error: ' . $handle->error . '';
                      	}
                      	$handle-> Clean();
                      }else{
                      	echo 'Error: ' . $handle->error . '';
                      }
                      
                      ?>

Open in new window

Firstly, you include the class file you downloaded that will handle the image functions. You can find more information about the available properties in the class file, but for this one we resize the image to the same size as the frame, and crop any overflow. We then use the watermark property to specify the location of the frame.

The resulting image name is then saved in the $filename variable, which you may use to insert into a database, redirect the user to it, etc.
I've used this script and it works beautifully on both Windows and *nix systems.
4
10,541 Views

Comments (5)

Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
DarkHill,

Nice article, thank you.  What is frame-property.png?

Author

Commented:
Hi, jason1178, I'm glad my article proved to be useful, thank you for your comment.

The frame-property.png file is the rounded corner frame applied to the image at the very top of the page. It's not easy to see is it's currently displayed over a white background. I suggest downloading it and opening it in a good image editing program, you will see the rounded corners right away!
Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
Hah!  That makes sense.  I thought my browser's ability to display png had gone on the fritz.

Well done on the article.  Keep it up, I look forward to reading more.
Hi, do you have a tutorial on how to create a profile picture frame maker? Something like this using PHP & Javascript?
https://www.fpwr.org/demo5/framemaker.php
i want to also add some text by user on frame, how can i do this?

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.