Codeigniter 4 Image Text Overlay Watermarking Tutorial Example

24-Aug-2021

.

Admin

Codeigniter 4 Image Text Overlay Watermarking Tutorial Example

Hi guys,

Today i will explained How to Import CSV File Data To MySQL Database in Codeigniter 4. This example is so easy to use in Codeigniter 4.

Codeigniter 4 image watermarking tutorial; In this detailed guide, we will explain how to add text watermarking on the image in the CodeIgniter 4 application with the help of the CodeIgniter’s default image manipulation class.

So let's start to the example.

Step 1: Install Codeigniter Project


composer create-project codeigniter4/appstarter

Step 2: Turn On Error Handling

In codeigniter you have to turn on the error handling by setting up display_errors property to 1 from 0, make sure to change the values in app/Config/Boot/development.php and app/Config/Boot/production.php files.

ini_set('display_errors', '1');

Step 3: Create Files Table In Database

Then third step to generate a database table in your application 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',

PRIMARY KEY (id)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='files table' AUTO_INCREMENT=1;

Step 4: Connect App To Database

Open the app/Config/Database.php, and insert database name, username and password into the file.

public $default = [

'DSN' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => '',

'database' => 'codeigniter_db',

'DBDriver' => 'MySQLi',

'DBPrefix' => '',

'pConnect' => false,

'DBDebug' => (ENVIRONMENT !== 'development'),

'cacheOn' => false,

'cacheDir' => '',

'charset' => 'utf8',

'DBCollat' => 'utf8_general_ci',

'swapPre' => '',

'encrypt' => false,

'compress' => false,

'strictOn' => false,

'failover' => [],

'port' => 3306,

];

If you are a Mac user or anyhow getting the CodeIgniter\Database\Exceptions\DatabaseException or Unable to connect database: Codeigniter errors. Then, you can follow the given below instruction to get rid of the mentioned issues.

# ====== MAMP

public $default = [

'hostname' => '/Applications/MAMP/tmp/mysql/mysql.sock',

]

# ====== XAMP

public $default = [

'hostname' => '/Applications/XAMPP/xamppfiles/var/mysql/mysql.sock',

]

Step 5: Create And Set Up Controller

Next, you require to create ImgManipulationController.php file in app/Controllers folder. Then, head over to app/Controllers/ImgManipulationController.php and add the add the given code.

You have to create the 'images' folder inside the 'public' folder; The public/images directory will hold the uploaded and watermarked file. Also, create the 'uploads' folder in 'writable' path; eventually, you may see these folder updated after successfully uploading the image files.

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

class ImgManipulationController extends Controller

{

public function index() {

return view('image');

}

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 Positronx @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: Register New Route

app/Config/Routes.php

$routes->setDefaultController('ImgManipulationController');

$routes->get('/', 'ImgManipulationController::index');

Step 7: Create Image Upload View

Next to create a view file in your application under directiory;

app/View/image.php

<!DOCTYPE html>

<html>

<head>

<title>Codeigniter 4 Image Text Overlay Watermarking Tutorial Example - Nicesnippets.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 Text Overlay Watermarking Tutorial Example</h2>

<form method='post' action='<?php echo base_url(); ?>/ImgManipulationController/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 8: Start CI Application

In this last step, you have to open the terminal, type command to run the application.

php spark serve

Then next run the url in your browser.

http://localhost:8080

Output

Now you can check your own.

I hope it can help you...

#Codeigniter 4

#Codeigniter