Press "Enter" to skip to content

Cara Compress Gambar di Laravel menggunakan Intervention Image

Published September 19, 2021 by fadli
fadli 1
laravel compress image

Laravel Compress Image – Halo semua nya, untuk kali ini kita akan mempelajari tentang bagaimana cara nya melakukan compress gambar pada saat gambar tersebut di upload kedalam system project kita..

Hal ini terkadang perlu dilakukan jika kita ingin menghemat resource sebuah server, karena salah satu hal yang paling banyak memakan resource adalah file image upload..

Untuk dapat melakukan nya, kita akan menggunakan sebuah library dengan nama Intervention Image, dan library ini juga sudah support terhadap framework Laravel..

Ada banyak opsi yang bisa kita lakukan dengan library ini, nanti akan coba praktekkan satu per satu..

Baca Juga : Tutorial Lengkap Export Pdf Laravel dengan DomPdf..

Persiapan – Laravel Compress Image

Kita akan mulai dari persiapan nya terlebih dahulu, karena ada beberapa hal yang perlu kita persiapakan sebelum masuk kedalam penggunaan library Intervention Image nya..

Instalasi Laravel

Untuk versi laravel yang saya gunakan yaitu versi 8, kalian bisa kunjungi halaman resmi laravel nya disini untuk mengetahui cara instalasi nya..

Trending
Cara Looping Diantara 2 Tanggal Menggunakan PHP

Database

Setelah proses instalasi laravel nya sudah selesai, sekarang kita buat database nya..

Buat database baru dengan nama “sangcahayaid_compress_image”..

Kemudian kita hubungkan database nya dengan project folder kita melalui file .env, silahkan kalian isi host nya, database, username, dan password..

laravel compress image

Setelah database nya terbentuk, sekarang kita buat table nya didalam database tersebut dengan nama “siswas” melalui laravel migration..

Di CMD/Terminal kalian jalankan perintah berikut:

php artisan make:model Siswa -m

Maka nanti akan tercipta 2 buah file baru, yaitu file Model dan file Migration nya..

Kalian buka file migration nya yang berada didalam folder ../database/migrations dan isi seperti berikut ini:

class CreateSiswasTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('siswas', function (Blueprint $table) {
            $table->id();
            $table->string('nama')->nullable();
            $table->string('no_hp')->nullable();
            $table->text('alamat')->nullable();
            $table->text('photo')->nullable();
            $table->timestamps();
        });
    }

Kemudian jalankan perintah

php artisan migrate

Maka nanti akan termigrate beberapa file migration, salah satunya yaitu file migration siswa nya, jika kamu cek didalam database, maka struktur dari table siswas nya akan seperti berikut:

laravel compress image

Buat Halaman Form nya

Sekarang kita akan buat halaman form nya..

Pertama kalian buat file controller nya terlebih dahulu dengan nama SiswaController, silahkan jalankan perintah berikut:

php artisan make:controller SiswaController

Kemudian kalian buat 2 route baru terlebih dahulu didalam file web.php seperti berikut:

../routes/web.php
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SiswaController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('siswa-form', [SiswaController::class, 'create']);
Route::post('siswa-form', [SiswaController::class, 'store']);

2 route tersebut memiliki url yang sama yaitu “../siswa-form”, tapi memiliki jenis method yang berbeda, get dan post..

Yang method get diarahkan ke SiswaController function create, sementara yang method post diarahkan ke SiswaController function store..

Sekarang kita buka file SiswaController nya, dan isi seperti berikut:

../app/Http/Controllers/SiswaController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Siswa;

class SiswaController extends Controller
{
    //
    public function create()
    {
        return view('siswa.create');
    }

    public function store()
    {
        //
    }
}

Sekarang buat file view nya didalam folder “../resources/views/siswa/create.blade.php” dan isi seperti berikut:

<!DOCTYPE html>
<html>

<head>
    <title>sangcahaya.id</title>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">

                <form role="form" style="margin-top: 15px;" method="POST" action="{{ url('siswa-form') }}"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="box-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1">Nama</label>
                            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Nama"
                                name="nama">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">No HP</label>
                            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="No HP"
                                name="no_hp">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Alamat</label>
                            <textarea name="alamat" class="form-control" id="" cols="30" rows="5"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputFile">Photo</label>
                            <input type="file" id="exampleInputFile" name="photo">

                            <p class="help-block">Example block-level help text here.</p>
                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>


            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</body>

</html>

Sekarang kalo kalian akses url “../siswa-form”, maka seharusnya akan tampil seperti berikut ini:

laravel compress image

Instalasi Package Intervention Image nya

Sekarang kita akan coba instalasi library package nya, yang kita gunakan yaitu versi 2, kalian bisa mengunjungi halaman official nya disini..

Syarat agar bisa menginstall package ini yaitu:

  • PHP >= 5.4
  • Fileinfo Extension
  • GD Library (>=2.0) … or …
  • Imagick PHP extension (>=6.5.7)

Untuk memulai proses instalasi nya, jalankan perintah berikut:

composer require intervention/image

laravel compress image, intervention image

Setelah itu kita perlu melakukan konfigurasi tambahan didalam file config/app.php..

Didalam array providers kalian tambahkan script berikut:

Intervention\Image\ImageServiceProvider::class

laravel compress image

Setelah itu kalian juga perlu menambahkan script berikut didalam array aliases:

'Image' => Intervention\Image\Facades\Image::class

laravel compress image

Cara Compress Gambar nya

Sekarang kita akan mulai untuk proses Compress Gambar nya..

Pada dasarnya, cara kerja nya yaitu dengan mengurangi ukuran tinggi dan lebar dari gambar nya..

Me-resize Lebar dan Tinggi Gambar nya..

Langsung saja saya buatkan sample coding nya.. kalian buka kembali file SiswaController nya dan modif seperti berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Intervention\Image\Facades\Image;

use App\Models\Siswa;

class SiswaController extends Controller
{
    //
    public function create()
    {
        return view('siswa.create');
    }

    public function store(Request $request)
    {
        $data['nama'] = $request->nama;
        $data['no_hp'] = $request->no_hp;
        $data['alamat'] = $request->alamat;

        $photo = $request->file('photo');
        if ($photo) {
            $nama_gambar = 'sangcahayaid-' . time() . $photo->getClientOriginalName();

            Image::make($request->file('photo'))->resize(115, 115)->save('uploads/' . $nama_gambar);

            $data['photo'] = 'uploads/' . $nama_gambar;
        }
        // dd($data);
        Siswa::insert($data);

        return redirect()->back();
    }
}

Coba kalian perhatikan pada baris ke-28, terdapat perintah resize yang fungsinya untuk mengubah ukuran lebar atau tinggi nya..

Kalo dari contoh script diatas, saya meresize lebar gambar nya menjadi 115 pixel, dan juga meresize tinggi gambar nya menjadi 115 pixel juga..

Sebagai perbandingan, gambar awal sebelum di compress memiliki spesifikasi seperti berikut:

laravel compress image laravel compress image

Dan setelah di compress menjadi seperti berikut:

laravel compress image laravel compress image

Dari yang sebelum nya berukuran 337,8 KB, menjadi 16,1 KB, sungguh pencapaian yang luar biasa..

Me-resize Lebar Gambar nya saja

Untuk me-resize lebar nya saja, kalian cukup isi parameter 1 nya aja, untuk parameter kedua nya dibuat null saja, seperti berikut:

Image::make($request->file('photo'))->resize(115, null)->save('uploads/' . $nama_gambar);

Me-resize Tinggi Gambar nya saja

Untuk me-resize tinggi gambar nya saja, kalian cukup mengisi nilai di parameter kedua nya saja, untuk parameter pertama nya diisi null saja, seperti berikut:

Image::make($request->file('photo'))->resize(null, 115)->save('uploads/' . $nama_gambar);

Mempertahankan Aspect Ratio

Aspect Ratio atau Aspek Rasio adalah perbandingan antara lebar dan tinggi dari suatu gambar..

Ketika kamu ingin melakukan pengcompresan pada suatu gambar dan kamu tetap ingin mempertahankan aspect ratio nya, maka kamu bisa gunakan cara berikut:

Resize lebar gambar, dan nilai tinggi nya di buat otomatis (Auto Height).. Aspect Ratio

Image::make($request->file('photo'))->resize(350, null, function ($constraint) {
    $constraint->aspectRatio();
})->save('uploads/' . $nama_gambar);

Kita cukup mengisi nilai di parameter pertama nya saja, artinya kita akan meresize ukuran lebar gambar nya..

Kemudian untuk parameter kedua atau tinggi gambar nya, kita isi null, karena nanti akan kita buat secara otomatis..

dan di parameter ketiga kita tambahkan sebuah function closure, yang mana didalam nya kita memanggil method yang bernama aspectRatio()..

Resize Tinggi gambar, dan nilai lebar nya di buat otomatis (Auto Width).. Aspect Ratio

Image::make($request->file('photo'))->resize(null, 350, function ($constraint) {
    $constraint->aspectRatio();
})->save('uploads/' . $nama_gambar);

Compress Gambar dengan Persentase

Sebetulnya untuk fitur compress image dengan persentase itu tidak ada, tapi bisa kita akali dengan nge get data lebar/tinggi nya terlebih dahulu, kemudian kita hitung dengan persentase, baru kita resize..

Sebagai contoh kita ingin mengcompress gambar nya sebesar 50%, maka sample coding nya adalah seperti berikut:

public function store(Request $request)
{
    $data['nama'] = $request->nama;
    $data['no_hp'] = $request->no_hp;
    $data['alamat'] = $request->alamat;

    $photo = $request->file('photo');
    if ($photo) {
        $nama_gambar = 'sangcahayaid-' . time() . $photo->getClientOriginalName();

        // get lebar gambar
        $lebar_gambar = Image::make($request->file('photo'))->width();
        $lebar_gambar -= $lebar_gambar * 50 / 100;

        Image::make($request->file('photo'))->resize($lebar_gambar, null, function ($constraint) {
            $constraint->aspectRatio();
        })->save('uploads/' . $nama_gambar);

        $data['photo'] = 'uploads/' . $nama_gambar;
    }
    // dd($data);
    Siswa::insert($data);

    return redirect()->back();
}

Coba kalian perhatikan script diatas:

  • Pada baris ke-12, kita nge get ukuran dari lebar gambar nya..
  • Kemudian pada baris ke-13 kita tentukan ukuran lebar yang baru setelah dikurangi 50 persen..
  • Kemudian pada baris ke-15 kita masukkan nilai lebar yang baru untuk di resize..

Membuat gambar blur

Kelebihan lain dari library ini yaitu kita bisa melakukan beberapa manipulasi gambar, ga hanya untuk compress image saja, misalkan kita ingin membuat blur suatu photo, kita tinggal tambahkan property() blur saja..

Untuk range nilai blur nya yaitu 1-100.. Semakin besar nilai nya, maka semakin besar juga blur nya..

Sample coding nya adalah seperti berikut:

Image::make($request->file('photo'))->resize($lebar_gambar, null, function ($constraint) {
    $constraint->aspectRatio();
})->blur(30)->save('uploads/' . $nama_gambar);

laravel compress image

Membalikkan Warna

Kita juga bisa melakukan pembalikan warna gambar dengan perintah invert() seperti berikut:

Image::make($request->file('photo'))->resize($lebar_gambar, null, function ($constraint) {
    $constraint->aspectRatio();
})->invert()->save('uploads/' . $nama_gambar);

laravel compress image

Sebagai perbandingan, gambar awal yang belum di invert adalah seperti berikut:

laravel compress image

Dan setelah di invert seperti berikut:

laravel compress image

Keren kan??

Mengatur Brightness atau Kecerahan Gambar

Untuk mengatur Brightness atau Kecerahan gambar, kalian bisa menggunakan property brightness()..

Untuk nilai brightness nya yaitu antara -100 untuk kecerahan terendah, sampai +100 untuk kecerahan tertinggi..

Misalkan sebagai contoh saya ingin meningkatkan kecerahan nya sampai di nilai +35, maka contoh koding nya adalah seperti berikut:

Image::make($request->file('photo'))->resize($lebar_gambar, null, function ($constraint) {
    $constraint->aspectRatio();
})->brightness(35)->save('uploads/' . $nama_gambar);

Kalau ingin menurunkan kecerahan nya sampai di angka -35, makan contoh koding nya adalah seperti berikut:

Image::make($request->file('photo'))->resize($lebar_gambar, null, function ($constraint) {
    $constraint->aspectRatio();
})->brightness(-35)->save('uploads/' . $nama_gambar);

Untuk hasil gambar nya adalah seperti berikut:

Gambar asli nya:

laravel compress image

Setelah di tingkatkan kecerahan nya sampai di angka +35:

laravel brightness image

Setelah diturunkan kecerahan nya sampai di angka -35:

laravel brightness image

Akhir Kata

Terima kasih sudah mengikuti tutorial ini, jika dirasa ada kebingungan, silahkan bertanya di kolom komentar yah..

Support Us

Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid

Terima kasih..

fadli

fadli

Published in Tutorial Laravel

Leave a Reply

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

%d bloggers like this: