<

Framing images in PHP

Published on
13,935 Points
7,535 Views
4 Endorsements
Last Modified:
Approved
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" />
</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
Comment
Author:DarkHill
  • 2
4 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
DarkHill,

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

Author Comment

by:DarkHill
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!
0
 
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.
0
 

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?
https://www.fpwr.org/demo5/framemaker.php
0

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Join & Write a Comment

Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
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