Codeigniter 4 image watermarking example. In this tutorial guide, you will learn how to add text watermarking on the image in the CodeIgniter 4 application with the help of the CodeIgniter’s default image manipulation class.
This tutorial will show you step-by-step on how to upload image similarly to create image watermarking functionality to add digital signature on the image using the image manipulation class.
Codeigniter 4 Image Text Overlay Watermarking Example
Follow the following steps and you can easily add text overlay watermark on images in codeigniter 4 apps:
- Step 1 – Download Codeigniter Latest
- Step 2 – Basic Configurations
- Step 3 – Create Database With Table
- Step 4 – Setup Database Credentials
- Step 5 – Create Controller
- Step 6 – Create Views
- Step 7 – Add Routes
- Step 8 – Start Development server
Step 1 – Download Codeigniter Project
In this step, you will download the latest version of Codeigniter 4, Go to this link https://codeigniter.com/download Download Codeigniter 4 fresh new setup and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”
Step 2 – Basic Configurations
Next, you will set some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.
Set Base URL like this
public $baseURL = 'http://localhost:8080'; To public $baseURL = 'http://localhost/demo/';
Step 3 – Create Database With Table
In this step, you need to create a database name demo, so open PHPMyAdmin and create the database with the name demo. After successfully create a database, you can use the below SQL query for creating a crop_images table in your database.
CREATE TABLE files(
id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
name varchar(100) NOT NULL COMMENT 'Name',
type varchar(255) NOT NULL COMMENT 'File Type',
created_at varchar(20) NOT NULL COMMENT 'Created date',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='demo table' AUTO_INCREMENT=1;
Step 4 – Setup Database Credentials
In this step, you need to connect our project to the database. So, visit app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, YOU need to set up database credentials in this file like below.
public $default = [
'DSN' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'demo',
'DBDriver' => 'MySQLi',
'DBPrefix' => '',
'pConnect' => false,
'DBDebug' => (ENVIRONMENT !== 'production'),
'cacheOn' => false,
'cacheDir' => '',
'charset' => 'utf8',
'DBCollat' => 'utf8_general_ci',
'swapPre' => '',
'encrypt' => false,
'compress' => false,
'strictOn' => false,
'failover' => [],
'port' => 3306,
];
Step 5 – Create Controller
In this step, Go to app/Controllers and create a controller name ImageUploadController.php. Then add the following code into it:
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class ImageUploadController extends Controller {
public function index() {
return view('imageUploadForm');
}
public function upload() {
helper(['form', 'url']);
// access database
$database = \Config\Database::connect();
$db = $database->table('files');
// file validation
$isValidFile = $this->validate([
'file' => [
'uploaded[file]',
'mime_in[file,image/jpg,image/jpeg,image/png,image/gif]',
'max_size[file,4096]',
]
]);
// check validation
if (!$isValidFile) {
print_r('Upload valid file upto 4mb size');
} else {
$imgPath = $this->request->getFile('file');
// Image manipulation
$image = \Config\Services::image()
->withFile($imgPath)
->text('Copyright Tutsmake.com @2021', [
'color' => '#fff',
'opacity' => 0.7,
'withShadow' => true,
'hAlign' => 'center',
'vAlign' => 'bottom',
'fontSize' => 20
])
->save(FCPATH .'/images/'. $imgPath->getRandomName());
$imgPath->move(WRITEPATH . 'uploads');
$fileData = [
'name' => $imgPath->getName(),
'type' => $imgPath->getClientMimeType()
];
$store = $db->insert($fileData);
print_r('File uploaded successfully.');
}
}
} ?>
Step 6 – Create Views
In this step, you need to create imageUploadForm.php, go to application/views/ directory and create imageUploadForm.php file. and update the following HTML into your files:
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter Adding Overlays Watermarks on Images Example - Tutsmake.com</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5" style="max-width: 500px">
<h2 class="mb-4 text-center">Codeigniter 4 Image Upload with Text Watermark Example</h2>
<form method='post' action='<?php echo base_url(); ?>/ImageUploadController/upload'
enctype='multipart/form-data'>
<div class="form-group">
<label for="formFileLg" class="form-label">Select image :</label>
<input class="form-control form-control-lg" type="file" name="file">
</div>
<div class="d-grid mt-3">
<input type="submit" value="Upload" class="btn btn-outline-primary" />
</div>
</form>
</div>
</body>
</html>
Step 7 – Add Routes
In this step, visit app/Config/ directory and open Routes.php file. Then define in the routes in this file, as shown below:
/*
* --------------------------------------------------------------------
* Route Definitions
* --------------------------------------------------------------------
*/
$routes->setDefaultController('ImageUploadController');
$routes->get('/', 'ImageUploadController::index');
Step 8 – Start Development server
For start development server, open your terminal and execute the following command it:
php spark serve
Then, Go to the browser and hit below the URL:
http://localhost:8080
Conclusion
Codeigniter 4 image watermarking example. In this tutorial guide, you have learned how to add text watermarking on the image in the CodeIgniter 4 application with the help of the CodeIgniter’s default image manipulation class.
