Cara Crop Gambar Di Laravel

Beberapa para program mungkin membutuhkan crop gambar, oleh sebab itu penulis kali ini membahas bagaimana cara crop gambar di laravel. Crop gambar dapat meringankan load gambar, memperkecil ukuran gambar juga sehingga sangat efektif untuk menekan kecepatan load program.

Penulis asumsikan bahwa anda telah menginstall laravel di local atau web server laptop anda, sehingga tutorial ini akan dimulai dari menginstall package yang dibutuhkan.

Crop Gambar Di Laravel

Yang terpenting sebelum kita memulai ialah bahwa di komputer anda sudah terinstall GD Library, cara mengeceknya sangat mudah, buatlah sebuah file php dimana saja di localhost anda lalu masukkan kode dibawah ini.

<?php phpinfo();

Setelah itu silahkan akses file tersebut, maka akan nampak informasi package dan library apa saja yang sudah di install di localhost anda, karna kita sedang membutuhkan GD maka perhatikan pada bagian GD saja, seperti pada gambar dibawah ini.

PHP Info GD Lib

Jika sudah sesuai selanjutnya kita install package Intervention Image, package tersebut yang akan kita gunakan untuk melakukan manipulasi pada gambar, caranya jalankan perintah dibawah ini.

composer require intervention/image

Selanjutnya tunggu sampai proses instalasi selesai, jika sudah maka akan seperti pada gambar dibawah ini.

Install Intervention Image Laravel

Selanjutnya buka file config/app.php yang ada didalam projek laravel anda lalu pada bagian providers tambahkan class dibawah ini.

Intervention\Image\ImageServiceProvider::class

Selajutnya masih di file yang sama, pada bagian aliases tambahkan class facade dibawah ini.

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

Jika semua kebutuhan sudah disiapkan selanjutnya kita akan membuat UI, konsepnya adalah ketika user upload gambar maka gambar tersebut akan langsung melakukan proses crop. Dalam tutorial ini kebetulan penulis menggunakan bootstrap 4, anda dapat menggunakan apa saja yang anda sukai.

Buatlah sebuah controller dengan nama CropController dengan cara menjalankan perintah dibawah ini di terminal atau CMD anda.

php artisan make:controller CropController

Perintah diatas akan membuat sebuah controller baru didalam folder app/Http/Controllers dengan nama CropController. Selanjutnya pada bagian atas controller tersebut tambahkan beberapa baris kode dibawah ini.

use Illuminate\Support\Facades\File;
use Image;

Tepat dibawah kode ini..

use Illuminate\Http\Request;

Sehingga menjadi seperti dibawah ini.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\File;
use Image;

class CropController extends Controller
{
    ....
}

Selanjutnya buatlah sebuah method dengan nama index() didalam CropController tersebut, sehingga menjadi seperti kode dibawah ini.

public function index()
{
    return view('crop.index');
}

Jika sudah, buat lagi method dengan nama store() dan buatlah menjadi seperti kode dibawah ini.

public function store(Request $request)
{
    $request->validate([
        'image' => 'required|mimes:jpg,jpeg,png,bmp',
    ]);
    
    $destination = public_path('uploads');

    if($request->hasFile('image')) {

        if(!File::isDirectory($destination)) {
            File::makeDirectory($destination, 0755, true, true);
        }

        $file = $request->file('image');
        $rename = 'image_' . date('YmdHis');
        $image = Image::make($file);

        // Simpan gambar original
        $image->save($destination . '/' . $rename . '.' . $file->getClientOriginalExtension());

        // Proses crop
        $image->fit(300, 300, function($constraint) {
            $constraint->aspectRatio();
        });
        $image->save($destination . '/' . $rename . '_300_x_300.' . $file->getClientOriginalExtension());

        return redirect()->back()->with('success', 'Gambar berhasil di upload dan di crop');
    } 

    return redirect()->back()->with('error', 'Belum ada file yang dipilih');
}

Sebelum kita melanjutkan langkah berikutnya, penulis akan sedikit menjelaskan kode diatas, kode diatas adalah proses upload dan crop gambar, dimana kita akan menyimpan 2 gambar dalam sekali upload, dimana gambar pertama adalah dengan ukuran original dan gambar kedua di crop dengan ukuran 300×300 pixel dengan rasio yang proprosional. Gambar-gambar tersebut akan disimpan didalam folder public/uploads/ dengan nama file menggunakan prefix image_ dan angka acak menggunakan tanggal jam dan detik.

Langkah selanjutnya adalah membuat bagian UI, karna skenario crop gambar di laravel ini menggunakan metode upload, maka kita memerlukan UI dengan input file sederhana, pada awal artikel penulis katakan bahwa didalam tutorial ini penulis menggunakan bootstrap sebagai CSS framework.

Buatlah sebuah file dengan nama bootstrap.blade.php didalam folder resources/views/layouts dan masukkan kode dibawah ini.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    @yield('content')
</body>
</html>

Selanjutnya buatlah sebuah file dengan nama index.php didalam folder resources/views/crop, folder crop ini anda bisa membuatnya secara manual. Setelah itu tambahkan kode dibawah ini.

@extends('layouts.bootstrap')

@section('content')
    <div class="contaier">
        <div class="row justify-content-center mt-4">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body">
                        @if(session()->has('error'))
                            <div class="alert alert-danger">{{ session()->get('error') }}</div>
                        @endif

                        @if(session()->has('success'))
                            <div class="alert alert-success">{{ session()->get('success') }}</div>
                        @endif
                        
                        <form action="{{ route('crop.store') }}" method="POST" enctype="multipart/form-data">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <div class="form-group">
                                <label for="image">Upload Gambar</label>
                                <div class="input-group{{ $errors->has('image') ? ' is-invalid' : '' }}">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="image" name="image" accept="image/*">
                                        <label class="custom-file-label" for="image">Choose file</label>
                                    </div>
                                </div>
                                @if($errors->has('image'))
                                    <span class="invalid-feedback">{{ $errors->first('image') }}</span>
                                @endif
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary">Upload</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Jika kode di atas sudah dibuat maka selanjutnya kita tinggalkan menjalankan projek laravel kita, dengan cara menjalankan perintah dibawah ini.

php artisan serve

Selanjutnya akses di browser anda dengan alamat url http://127.0.0.1:8000/crop maka seharusnya tampilannya akan seperti gambar dibawah ini.

Crop Gambar DI Laravel

Nah jika sudah sesuai silahkan upload satu gambar, jika berhasil di upload silahkan anda cek folder public/uploads/. sebagai contoh penulis telah mengunggah gambar dengan resolusi 2560 × 1705 pixel dan ukuran sebesar 1,3 MB maka apabila di upload dengan crop gambar di laravel akan mejadi seperti dibawah ini.

Cara Crop Gambar Di Laravel

Demikian tutorial crop gambar di laravel, jika kamu ingin melakukan hal lain seperti resize dan lain-lain dapat anda pelajari di situs Intervention Image di URL http://image.intervention.io/. Semoga bermanfaat.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.