[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More


Framing images in PHP

Published on
14,249 Points
4 Endorsements
Last Modified:
Community Pick
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" />

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:


$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';

	if ($handle->processed) {
		$filename = $handle->file_dst_name;
		echo 'Error: ' . $handle->error . '';
	$handle-> Clean();
	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.
  • 2
LVL 70

Expert Comment

by:Jason C. Levine

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

Author Comment

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!
LVL 70

Expert Comment

by:Jason C. Levine
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.

Expert Comment

by:Antonio Nunnally
Hi, do you have a tutorial on how to create a profile picture frame maker? Something like this using PHP & Javascript?

Featured Post

Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

Join & Write a Comment

The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month