Pada artikel ini, kita akan belajar cara crop image sebelum diunggah menggunakan cropper js di laravel 10. Dengan menggunakan cropper js, Anda dapat mengubah ukuran gambar dan mengunggahnya ke database tanpa memuat ulang dan refresh halaman di laravel 10. Jadi, mari kita simak tutorial berikut ini.
Ada dua cara untuk menggunakan cropper js seperti file npm dan CDN. Untuk tutorial kali ini, kita akan menggunakan CDN cropper js.
Baca Juga
Install Laravel
Pada langkah yang pertama, kita akan menginstal aplikasi laravel 10 untuk crop image menggunakan perintah composer seperti berikut dan jalankan perintah tersebut di terminal Anda.
composer create-project laravel/laravel laravel_crop_image
Konfigurasi Database
Setelah itu, kita akan mengonfigurasi detail database pada file .env
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel_image_upload DB_USERNAME=root DB_PASSWORD=
Membuat Migration dan Model
Pada tahap selanjutnya, kita akan membuat migrasi dan model dengan menggunakan perintah berikut.
php artisan make:model CropImage -m
Selanjutnya silakan buka file migrasi yang dihasilkan di database/migrations/xxxx_xx_xx_xxxxxx_create_crop_images_table.php. Pada method up(), kita menambahkan name dengan tipe datanya yaitu string.
public function up(): void
{
Schema::create('crop_images', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}Setelah itu, kita akan memigrasikan tabel dengan menggunakan perintah berikut.
php artisan migrate
Menambahkan Routes
Tapahan kali ini, kita akan menambahkan rute ke file routes/web.php. Jadi, tambahkan kode berikut ini ke file tersebut.
<?php
use App\Http\Controllers\CropImageController;
Route::get('crop-image-upload', [CropImageController::class, 'index']);
Route::post('crop-image-upload-ajax', [CropImageController::class, 'cropImageUploadAjax']);Membuat Controller
Sekarang, kita akan membuat file CropImageController.php dengan menggunakan perintah berikut.
php artisan make:controller CropImageController
Buka CropImageController yang barusan kita buat di app/Http/Controllers/CropImageController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\CropImage;
class CropImageController extends Controller
{
public function index()
{
return view('crop-image-upload');
}
public function cropImageUploadAjax(Request $request)
{
$folderPath = public_path('upload/');
$image_parts = explode(";base64,", $request->image);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$imageName = uniqid() . '.png';
$imageFullPath = $folderPath.$imageName;
file_put_contents($imageFullPath, $image_base64);
$saveFile = new CropImage;
$saveFile->name = $imageName;
$saveFile->save();
return response()->json(['success'=>'Crop Image Uploaded Successfully']);
}
}Selanjutnya, kita tambahkan folder upload di public/ yang nantinya akan menyimpan gambar hasil crop.
Membuat Tampilan Crop Image
Kemudian, kita akan membuat file crop-image-upload.blade.php di folder resources/views/. Jadi, tambahkan kode berikut ini ke file tersebut.
<!DOCTYPE html>
<html>
<head>
<title>Cara Crop Image Sebelum Diupload di Laravel 10 - Leravio</title>
<meta name="_token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
</head>
<style type="text/css">
body{
background:#f6d352;
}
h1{
font-weight: bold;
font-size:23px;
}
img {
display: block;
max-width: 100%;
}
.preview {
text-align: center;
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
}
input{
margin-top:40px;
}
.section{
margin-top:150px;
background:#fff;
padding:50px 30px;
}
.modal-lg{
max-width: 1000px !important;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2 section text-center">
<h1>Cara Crop Image Sebelum Diupload di Laravel 10 - Leravio</h1>
<input type="file" name="image" class="image">
</div>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">How to crop image before upload image in laravel 10 - Leravio</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row">
<div class="col-md-8">
<img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
</div>
<div class="col-md-4">
<div class="preview"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="crop">Crop</button>
</div>
</div>
</div>
</div>
<script>
var $modal = $('#modal');
var image = document.getElementById('image');
var cropper;
$("body").on("change", ".image", function(e){
var files = e.target.files;
var done = function (url) {
image.src = url;
$modal.modal('show');
};
var reader;
var file;
var url;
if (files && files.length > 0) {
file = files[0];
if (URL) {
done(URL.createObjectURL(file));
} else if (FileReader) {
reader = new FileReader();
reader.onload = function (e) {
done(reader.result);
};
reader.readAsDataURL(file);
}
}
});
$modal.on('shown.bs.modal', function () {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 3,
preview: '.preview'
});
}).on('hidden.bs.modal', function () {
cropper.destroy();
cropper = null;
});
$("#crop").click(function(){
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
canvas.toBlob(function(blob) {
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
$.ajax({
type: "POST",
dataType: "json",
url: "crop-image-upload-ajax",
data: {'_token': $('meta[name="_token"]').attr('content'), 'image': base64data},
success: function(data){
console.log(data);
$modal.modal('hide');
alert("Crop image successfully uploaded");
}
});
}
});
});
</script>
</body>
</html> Jalankan Aplikasi Laravel
Terakhir, kita jalankan proses crop gambar sebelum diupload menggunakan plugin cropper di laravel 10 dengan menggunakan perintah berikut.
php artisan serve
Anda bisa langsung membuka url http://127.0.0.1:8000/crop-image-upload untuk mencoba melakukan crop image di browser.