Membuat Thumbnail Gambar Dengan Codeigniter 4

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 …


This content originally appeared on DEV Community and was authored by MedanInCode

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')
  1. $width untuk lebar dari gambar
  2. $height untuk tinggi gambar
  3. $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')
  1. $width untuk lebar dari gambar
  2. $height untuk tinggi gambar
  3. $x titik awal pixel dari kiri gambar untuk mulai di crop.
  4. $y titik awal pixel dari atas gambar untuk mulai di crop.
  5. $maintainRatio defaulnya false,jika true akan mempertahakan aspect ratio dari gambar asli.
  6. $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.


This content originally appeared on DEV Community and was authored by MedanInCode


Print Share Comment Cite Upload Translate Updates
APA

MedanInCode | Sciencx (2022-03-18T05:06:05+00:00) Membuat Thumbnail Gambar Dengan Codeigniter 4. Retrieved from https://www.scien.cx/2022/03/18/membuat-thumbnail-gambar-dengan-codeigniter-4/

MLA
" » Membuat Thumbnail Gambar Dengan Codeigniter 4." MedanInCode | Sciencx - Friday March 18, 2022, https://www.scien.cx/2022/03/18/membuat-thumbnail-gambar-dengan-codeigniter-4/
HARVARD
MedanInCode | Sciencx Friday March 18, 2022 » Membuat Thumbnail Gambar Dengan Codeigniter 4., viewed ,<https://www.scien.cx/2022/03/18/membuat-thumbnail-gambar-dengan-codeigniter-4/>
VANCOUVER
MedanInCode | Sciencx - » Membuat Thumbnail Gambar Dengan Codeigniter 4. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/18/membuat-thumbnail-gambar-dengan-codeigniter-4/
CHICAGO
" » Membuat Thumbnail Gambar Dengan Codeigniter 4." MedanInCode | Sciencx - Accessed . https://www.scien.cx/2022/03/18/membuat-thumbnail-gambar-dengan-codeigniter-4/
IEEE
" » Membuat Thumbnail Gambar Dengan Codeigniter 4." MedanInCode | Sciencx [Online]. Available: https://www.scien.cx/2022/03/18/membuat-thumbnail-gambar-dengan-codeigniter-4/. [Accessed: ]
rf:citation
» Membuat Thumbnail Gambar Dengan Codeigniter 4 | MedanInCode | Sciencx | https://www.scien.cx/2022/03/18/membuat-thumbnail-gambar-dengan-codeigniter-4/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.