cara crop image sebelum diupload di laravel 10

Cara Crop Image Sebelum Diupload di Laravel 10

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.

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.

Leave a Comment

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

Scroll to Top