Upload and Watermark(Overlay) Image using Codeigniter

This tutorial will show you how to upload an image and watermark the image using Codeigniter. The Watermarking feature requires the GD/GD2 library.
CodeIgniter’s File Uploading Class permits files to be uploaded. You can set various preferences, restricting the type and size of the files.

Uploading a file involves the following general process:

An upload form is displayed, allowing a user to select a file and upload it.
When the form is submitted, the file is uploaded to the destination you specify.
Along the way, the file is validated to make sure it is allowed to be uploaded based on the preferences you set.
Once uploaded, the user will be shown a success message.

CodeIgniter’s Image Manipulation class lets you perform the following actions:

Image Resizing
Thumbnail Creation
Image Cropping
Image Rotating
Image Watermarking

Two Types of Watermarking

There are two types of watermarking that you can use:

Text: The watermark message will be generated using text, either with a True Type font that you specify, or using the native text output that the GD library supports. If you use the True Type version your GD installation must be compiled with True Type support (most are, but not all).
Overlay: The watermark message will be generated by overlaying an image (usually a transparent PNG or GIF) containing your watermark over the source image.

Read also Upload and Watermark(Text) Image using Codeigniter


Netbeans 8.1
XAMPP in Windows
Codeigniter 3.0.6

Configure XAMPP and Netbeans

From Netbeans IDE go to Tools->Options. Click on PHP. Now on tab “General” browse the file for “PHP 5 Interpreter”. The php interpreter file generally placed inside the <physical drive in Windows OS>:xamppphpphp.exe

Configure Codeigniter and Netbeans

Create a new PHP project in Netbeans. Then remove the index.php file from the newly created project. Now copy the extracted files from Codeigniter 3.0.6 to the newly created project directory.

Directory Structure

A typical directory structure for the project would be as shown below. Here upload directory will contain the uploaded image file.
image upload resize codeigniter

Step 1. Now modify <root directory>/application/config/autoload.php file for auto-loading html, url, file and form

Step 2. Create a view file under <root directory>/application/views which will be used for uploading image displaying resized image

Step 3. Create a Controller class under <root directory>/application/controllers for handling client’s request and response

If you prefer not to set preferences using method $this->load->library(‘image_lib’, $config), you can instead put them into a config file. Simply create a new file called image_lib.php, add the $config array in that file. Then save the file in config/image_lib.php and it will be used automatically.

Step 4. Now modify <root directory>/application/config/routes.php file for pointing the default controller class

Step 5. Now if everything is fine run the application, you will see below output in the browser

image upload codeigniter watermark

Step 6. Now browse and select an image file, the file will be uploaded to <root directory>/application/upload directory with reduced size and the resized image will be displayed on browser

upload image codeigniter watermark

upload image codeigniter watermark

Below is the overlay image for watermarking

overlay image

Thanks for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *