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();Code language: HTML, XML (xml)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.
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.
Selanjutnya buka file config/app.php yang ada didalam projek laravel anda lalu pada bagian providers tambahkan class dibawah ini.
Intervention\Image\ImageServiceProvider::classCode language: JavaScript (javascript)Selajutnya masih di file yang sama, pada bagian aliases tambahkan class facade dibawah ini.
'Image' => Intervention\Image\Facades\Image::classCode language: PHP (php)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;Code language: PHP (php)Tepat dibawah kode ini..
use Illuminate\Http\Request;Code language: PHP (php)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
{
....
}Code language: HTML, XML (xml)Selanjutnya buatlah sebuah method dengan nama index() didalam CropController tersebut, sehingga menjadi seperti kode dibawah ini.
public function index()
{
return view('crop.index');
}Code language: PHP (php)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');
}Code language: PHP (php)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>Code language: HTML, XML (xml)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>
@endsectionCode language: JavaScript (javascript)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.
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.
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.
