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(Overlay) Image using Codeigniter

Prerequisites

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

/*
  | -------------------------------------------------------------------
  |  Auto-load Helper Files
  | -------------------------------------------------------------------
  | Prototype:
  |
  |    $autoload['helper'] = array('url', 'file');
 */
$autoload['helper'] = array('html', 'url', 'file', 'form');

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Codeigniter Image Watermarking</title>
        <style type="text/css">

            ::selection { background-color: #E13300; color: white; }
            ::-moz-selection { background-color: #E13300; color: white; }

            body {
                background-color: #fff;
                margin: 40px;
                font: 13px/20px normal Helvetica, Arial, sans-serif;
                color: #4F5155;
            }            

            #body {
                margin: 0 15px 0 15px;
            }

            #container {
                margin: 10px;
                border: 1px solid #D0D0D0;
                box-shadow: 0 0 8px #D0D0D0;
            }

            .error {
                color: #E13300;
            }

            .success {
                color: darkgreen;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <h1>CodeIgniter Image Watermarking</h1>

            <div id="body">
                <p>Select an image file to watermark</p>
                <?php
                if (isset($success) && strlen($success)) {
                    echo '<div class="success">';
                    echo '<p>' . $success . '</p>';
                    echo '</div>';
                }
                if (isset($errors) && strlen($errors)) {
                    echo '<div class="error">';
                    echo '<p>' . $errors . '</p>';
                    echo '</div>';
                }
                if (validation_errors()) {
                    echo validation_errors('<div class="error">', '</div>');
                }
                if (isset($watermark_img)) {
                    echo img($watermark_img);
                }
                ?>
                <?php
                $attributes = array('name' => 'image_upload_form', 'id' => 'image_upload_form');
                echo form_open_multipart($this->uri->uri_string(), $attributes);
                ?>
                <p><input name="image_name" id="image_name" readonly="readonly" type="file" /></p>
                <p><input name="image_upload" value="Upload Image" type="submit" /></p>
                <?php
                echo form_close();
                ?>
            </div>

        </div>
    </body>
</html>

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

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

/**
 * Description of ImageUpload
 *
 * @author https://www.roytuts.com
 */
class ImageUpload extends CI_Controller {

    //variable for storing error message
    private $error;
    //variable for storing success message
    private $success;

    function __construct() {
        parent::__construct();
        //load this to validate the inputs in upload form
        $this->load->library('form_validation');
    }

    //appends all error messages
    private function handle_error($err) {
        $this->error .= $err . "rn";
    }

    //appends all success messages
    private function handle_success($succ) {
        $this->success .= $succ . "rn";
    }

    public function index() {
        if ($this->input->post('image_upload')) {
            //set preferences
            //file upload destination
            $upload_path = './upload/';
            $config['upload_path'] = $upload_path;
            //allowed file types. * means all types
            $config['allowed_types'] = 'jpg|png|gif';
            //allowed max file size. 0 means unlimited file size
            $config['max_size'] = '0';
            //max file name size
            $config['max_filename'] = '255';
            //whether file name should be encrypted or not
            $config['encrypt_name'] = TRUE;
            //store image info once uploaded
            $image_data = array();
            //check for errors
            $is_file_error = FALSE;
            //check if file was selected for upload
            if (!$_FILES) {
                $is_file_error = TRUE;
                $this->handle_error('Select an image file.');
            }
            //if file was selected then proceed to upload
            if (!$is_file_error) {
                //load the preferences
                $this->load->library('upload', $config);
                //check file successfully uploaded. 'image_name' is the name of the input
                if (!$this->upload->do_upload('image_name')) {
                    //if file upload failed then catch the errors
                    $this->handle_error($this->upload->display_errors());
                    $is_file_error = TRUE;
                } else {
                    //store the file info
                    $image_data = $this->upload->data();
                    $config['image_library'] = 'gd2'; //default value
                    $config['source_image'] = $image_data['full_path']; //get original image
                    $config['wm_text'] = 'Copyright 2014 - 2016, roytuts.com';
                    $config['wm_type'] = 'text';
                    $config['wm_font_path'] = 'C:WindowsFontsALGER.ttf';
                    $config['wm_font_size'] = '18';
                    $config['wm_font_color'] = '#707A7C';
                    $config['wm_vrt_alignment'] = 'middle';
                    $config['wm_hor_alignment'] = 'center';
                    $config['wm_padding'] = '20';
                    $this->load->library('image_lib', $config);
                    if (!$this->image_lib->watermark()) {
                        $this->handle_error($this->image_lib->display_errors());
                    }
                }
            }
            // There were errors, we have to delete the uploaded image
            if ($is_file_error) {
                if ($image_data) {
                    $file = $upload_path . $image_data['file_name'];
                    if (file_exists($file)) {
                        unlink($file);
                    }
                }
            } else {
                $data['watermark_img'] = $upload_path . $image_data['file_name'];
                $this->handle_success('Image was successfully uploaded to direcoty <strong>' . $upload_path . '</strong> and watermarked.');
            }
        }

        //load the error and success messages
        $data['errors'] = $this->error;
        $data['success'] = $this->success;
        //load the view along with data
        $this->load->view('image_upload', $data);
    }

}

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

$route['default_controller'] = 'imageupload';

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 watermarked image and the watermarked image will be displayed on browser

image upload codeigniter watermark

Thanks for reading.

Tags:

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials | TwitterFacebook Google PlusLinkedin | Reddit

Leave a Reply

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