Membuat Thumbnail Gambar Dengan Codeigniter 4

#webdev #beginners #codeigniter

Tutorial kali ini akan membahas bagaimana membuat gambar thumbnail menggunakan codeigniter 4.Thumbnail di web sendiri adalah gambar asli yang diperkecil agar proses loading lebih cepat.Apalagi jika gambar asli kita memiliki ukuran yang besar.

Ada dua fungsi yang bisa digunakan pertama fit dan kedua crop.

Menggunakan Fungsi Fit

Pada fungsi fit terdapat tiga parameter :

fit(int $width, int $height = null, string $position = 'center')

$width untuk lebar dari gambar
$height untuk tinggi gambar
$position untuk menentukan mulai dari bagian mana gambar dipotong.Ada beberapa pilihan : ‘top-left’, ‘top’, ‘top-right’, ‘left’, ‘center’, ‘right’, ‘bottom-left’, ‘bottom’, ‘bottom-right’.

<?php namespace App\Controllers;
class Thumbnail extends BaseController
{
    public function index()
    {
        $thumbnail = \Config\Services::image()
        ->withFile(ROOTPATH.'public/uploads/gambar.jpg')
        ->fit(100, 100, 'center')
        ->save(ROOTPATH.'public/uploads/thumb/gambar.jpg');
    }
}

Pada kode diatas kita memangil fungsi \Config\Services::image() dari Codeigniter 4,withFile adalah lokasi dari file gambar asli kita,fit untuk mengcrop gambar,save untuk menyimpan hasil ke lokasi yang baru.

Menggunakan Fungsi Crop

Terdapat 6 parameter pada fungsi crop:

crop(int $width = null, int $height = null, int $x = null, int $y = null, bool $maintainRatio = false, string $masterDim = 'auto')

$width untuk lebar dari gambar
$height untuk tinggi gambar
$x titik awal pixel dari kiri gambar untuk mulai di crop.
$y titik awal pixel dari atas gambar untuk mulai di crop.
$maintainRatio defaulnya false,jika true akan mempertahakan aspect ratio dari gambar asli.
$masterDim menentukan bagian mana yang tidak tersentuh jika $mainRatio bernilai true.Nilainya bisa : 'width','height','auto'.

Gunakan crop jika position awal cropping tidak ada di position fungsi fit diatas.

<?php namespace App\Controllers;
class Thumbnail extends BaseController
{
    public function index()
    {
        $ukuranCrop = 50;

        $info = \Config\Services::image()
            ->withFile(ROOTPATH.'public/uploads/gambar.jpg')
            ->getFile()
            ->getProperties(true);

        $xOffset = ($info['width'] / 2) - ($ukuranCrop / 2);
        $yOffset = ($info['height'] / 2) - ($ukuranCrop / 2);

        $thumbnail = \Config\Services::image()
                    ->withFile(ROOTPATH.'public/uploads/gambar.jpg')
                    ->crop($ukuranCrop, $ukuranCrop, $xOffset, $yOffset)
                    ->save(ROOTPATH.'public/uploads/thumb/gambar.jpg');
    }
}

Misalnya kita ingin mencrop dari tengah-tengah gambar dengan menggunakan crop seperti yang dilakukan pada fungsi fit sebelumnya.Proses akan lebih ribet,kita perlu mendapatkan dulu info dari gambar asli agar mendapatkan posisi pas yang ditengah.

Bisa dilihat kita harus menggunakan rumus seperti yang digunakan di $xOffset untuk mendapatkan posisi center dari x.Jauh lebih ribet padahal dengan fungsi fit kita cukup panggil position center.

$xOffset = ($info['width'] / 2) - ($ukuranCrop / 2);

Dari dua metode untuk membuat thumbnail diatas ,fit lebih kami sarankan karena lebih mudah penggunaanya.Gunakan crop hanya jika benar-benar membutuhkan titik awal kiri dan atas yang spesifik.

Sekian tutorial kali ini,jika ada pertanyaan bisa ditanyakan.Jika tidak yasudah.