تو این آموزش قرار هست نحوه تبدیل فرمت تصویر به فرمت webp رو خدمتتون آموزش بدیم

همون طور که میدونید فرمت webp باعث افزایش سرعت صفحات وب شما میشه

پکیجی که قرار هست با اون اینکار رو انجام بدیم اسمش intervention/image هست که احتمالا قبلا باهاش کار کردید

قدم به قدم با من پیش برید تا بتونیم با هم اینکار رو انجام بدیم

قدم اول

نصب پکیج هست

composer require intervention/image

قدم دوم
ساخت کنترلر

php artisan make:controller ImageController

<?php
    
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
use Intervention\Image\ImageManagerStatic;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Storage;
    
class ImageController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(): View
    {
        return view('imageUpload');
    }
        
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request): RedirectResponse
    {
        $this->validate($request, [
            'image' => ['required',
                        'image',
                        'mimes:jpg,png,jpeg,gif,svg',
                        'max:2048'],
        ]);
      
        $input = $request->all();
        $image  = ImageManagerStatic::make($request->file('image'))->encode('webp');
  
        $imageName = Str::random().'.webp';
  
        /*  
            Save Image using Storage facade
            $path = Storage::disk('public')->put('images/'. $imageName, $image);
        */
  
        $image->save(public_path('images/'. $imageName));
        $input['image_name'] = $imageName;
  
        /* 
            Store Image to Database
        */
       
        return back()
            ->with('success', 'Image Upload successful')
            ->with('imageName', $imageName);
    }
}

قدم سوم: ایجاد روت

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\ImageController;
  
/* 
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::controller(ImageController::class)->group(function(){
    Route::get('image-upload', 'index');
    Route::post('image-upload', 'store')->name('image.store');
});

قدم چهارم: ایجاد فایل blade

<!DOCTYPE html>
<html>
<head>
    <title>How to Convert an Image to webp in Laravel? - ItSolutionStuff.com</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    
<div class="container">
    <h1>How to Convert an Image to webp in Laravel? - ItSolutionStuff.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-dismissible fade show" role="alert">
      <strong>{{ $message }}</strong>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  
    <div class="row">
        <div class="col-md-4">
            <strong>Original Image:</strong>
            <br/>
            <img src="/images/{{ Session::get('imageName') }}" width="300px" />
        </div>
    </div>
    @endif
            
    <form action="{{ route('image.store') }}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <br/>
                <input type="file" name="image" class="image">
            </div>
            <div class="col-md-12">
                <br/>
                <button type="submit" class="btn btn-success">Upload Image</button>
            </div>
        </div>
    </form>
</div>
    
</body>
</html>

خوب دوستان آموزش ما اینجا به پایان رسید

حالا روتی که ساختید رو توی مرورگر باز کنید و برنامه تون رو تست کنید

http://localhost:8000/image-upload

امیدوارم آموزش براتون مفید بوده باشه

موفق باشید

آموزش لاراول | 11 ماه پیش | ⌛ 1 دقیقه خواندن