andriajah Sat Jan 2022 1 year ago

Contoh Resize Image Sebelum Upload di Laravel

Saya akan menjelaskan tutorial langkah demi langkah mengubah ukuran gambar di aplikasi laravel 8/7/6 menggunakan intervensi gambar. kita akan belajar bagaimana menggunakan paket intervensi gambar dengan laravel8/7/6. kami akan menghasilkan gambar mini saat diunggah di laravel 8/7/6.

 

kami akan menggunakan paket intervention/image untuk mengubah ukuran atau mengubah ukuran gambar di laravel. intervensi menyediakan fungsi pengubahan ukuran yang akan mengambil tiga parameter. tiga parameter adalah lebar, tinggi dan fungsi panggilan balik. fungsi panggilan balik adalah opsional.

 

Jadi di sini saya menulis tutorial langkah demi langkah mengubah ukuran gambar di laravel. Jadi ikuti saja langkah di bawah ini untuk membuat contoh gambar untuk proyek Anda.

Step 1: Install Laravel 8/7/6

Pada langkah ini, jika Anda belum menyiapkan aplikasi laravel 8/8/6 maka kita harus mendapatkan aplikasi laravel 8/7/6 yang baru. Jadi jalankan perintah di bawah ini dan dapatkan aplikasi laravel 8/7/6 yang bersih dan segar.

composer create-project --prefer-dist laravel/laravel blog

Step 2: Install Intervention Image Package

Pada langkah kedua kita akan menginstal intervention/image untuk mengubah ukuran gambar. paket ini melalui kami dapat menghasilkan gambar thumbnail untuk proyek kami. jadi pertama jalankan perintah di bawah ini di cmd atau terminal Anda:

composer require intervention/image

Sekarang kita perlu menambahkan jalur penyedia dan jalur alias di file config/app.php jadi buka file itu dan tambahkan kode di bawah ini.

config/app.php

return [
    ......
    $provides => [
        ......
        ......,
        'Intervention\Image\ImageServiceProvider'
    ],
    $aliases => [
        .....
        .....,
        'Image' => 'Intervention\Image\Facades\Image'
    ]

]

Step 3: Create Routes

Pada langkah ini kita akan menambahkan route dan file controller jadi pertama-tama tambahkan route di bawah ini pada file route.php Anda.

 

route/web.php

Route::get('resizeImage', 'ImageController@resizeImage');
Route::post('resizeImagePost', 'ImageController@resizeImagePost')->name('resizeImagePost');

Step 4: Create Controller File

ekarang perlu membuat ImageController baru untuk mengunggah gambar dan mengubah ukuran gambar jadi pertama jalankan perintah di bawah ini:

php artisan make:controller ImageController

Setelah perintah ini, Anda dapat menemukan file ImageController.php di direktori app/Http/Controllers Anda. buka file ImageController.php dan masukkan kode di bawah ini ke dalam file itu.

 

app/Http/Controllers/ImageController.php

<?php
  
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
use App\Http\Requests;
use Image;
class ImageController extends Controller
{
  
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function resizeImage()
    {
        return view('resizeImage');
    }
  
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function resizeImagePost(Request $request)
    {
        $this->validate($request, [
            'title' => 'required',
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);
  
        $image = $request->file('image');
        $input['imagename'] = time().'.'.$image->extension();
     
        $destinationPath = public_path('/thumbnail');
        $img = Image::make($image->path());
        $img->resize(100, 100, function ($constraint) {
            $constraint->aspectRatio();
        })->save($destinationPath.'/'.$input['imagename']);
   
        $destinationPath = public_path('/images');
        $image->move($destinationPath, $input['imagename']);
   
        return back()
            ->with('success','Image Upload successful')
            ->with('imageName',$input['imagename']);
    }
   
}

 

Step 5: View File and Create Upload directory

Ok, pada langkah terakhir ini kita akan membuat file resizeImage.blade.php untuk form upload foto dan mengatur pesan error dan juga pesan sukses. Jadi pertama buat file resizeImage.blade.php dan masukkan kode di bawah ini:

resources/views/resizeImage.blade.php

@extends('layouts.app')
   
@section('content')
<div class="container">
<h1>Resize Image Uploading Demo - Medikre.com</h1>
@if (count($errors) > 0)
    <div class="alert alert-danger">
        <strong>Whoops!</strong> There were some problems with your input.<br><br>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
   
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
    <button type="button" class="close" data-dismiss="alert">×</button>    
    <strong>{{ $message }}</strong>
</div>
<div class="row">
    <div class="col-md-4">
        <strong>Original Image:</strong>
        <br/>
        <img src="/images/{{ Session::get('imageName') }}" />
    </div>
    <div class="col-md-4">
        <strong>Thumbnail Image:</strong>
        <br/>
        <img src="/thumbnail/{{ Session::get('imageName') }}" />
    </div>
</div>
@endif
   
{!! Form::open(array('route' => 'resizeImagePost','enctype' => 'multipart/form-data')) !!}
    <div class="row">
        <div class="col-md-4">
            <br/>
            {!! Form::text('title', null,array('class' => 'form-control','placeholder'=>'Add Title')) !!}
        </div>
        <div class="col-md-12">
            <br/>
            {!! Form::file('image', array('class' => 'image')) !!}
        </div>
        <div class="col-md-12">
            <br/>
            <button type="submit" class="btn btn-success">Upload Image</button>
        </div>
    </div>
{!! Form::close() !!}
</div>
@endsection

Oke, akhirnya buat dua direktori di folder public Anda (1) gambar dan (2) thumbnail dan tolong beri izin ke folder itu dan centang....

 

Saya harap dapat membantu Anda...

laravel upload image laravel intervention/image laravel php tutorial