Chương 12-Bài 9. Cách tự động sinh Ảnh nhiều kích cỡ (Automatic resize image) khi upload file Ảnh

Yêu cầu

Để tối ưu ảnh khi hiển thị trên nhiều thiết bị khác nhau. Khi người dùng upload 1 hình ảnh bất kỳ. Thông thường chúng ta sẽ:

• Tự động sinh ra nhiều file ảnh bằng cách điều chỉnh kích cỡ (resize ảnh).
• Được đặt tên theo quy cách ten_file_anh_rong_x_cao

Ví dụ: người dùng upload file ảnh hoa-hong.jpg, có kích thước thực của file ảnh là 3200x1900 px. Chúng ta sẽ tự sinh ra các file như sau:

• hoa-hong.jpg
• hoa-hong-100x100.jpg
• hoa-hong-150x150.jpg
• hoa-hong-300x169.jpg
• hoa-hong-450x450.jpg
• hoa-hong-600x338.jpg
• hoa-hong-768x432.jpg
• hoa-hong-1024x576.jpg
• ...

Các bước thực hiện

Để thuận tiện chúng ta sẽ sử dụng thư viện hiệu chỉnh ảnh nổi tiếng của PHP là https://github.com/Intervention/image

Step 1: cài đặt thư viện

Gõ câu lệnh vào cmd:

composer require intervention/image

Step 2: bật cấu hình sử dụng thư viện Intervention Image

Hiệu chỉnh file config/app.php

return [
    ......
    ......

    $provides => [
        ......,

        Intervention\Image\ImageServiceProvider::class

    ],

    $aliases => [
        .....,

        'Image' => Intervention\Image\Facades\Image::class

    ]

]

Step 3: bổ sung bước xử lý lưu ảnh theo tỷ lệ mong muốn trong Action của Controller thích hợp

/**
     * Image resize
     */
    public function imgResize(Request $request)
    {
 
        $image = $request->file('imgFile');
        $input['imagename'] = time().'.'.$image->extension();
     
        $filePath = public_path('/thumbnails');

        $img = Image::make($image->path());
        $img->resize(110, 110, function ($const) {
            $const->aspectRatio();
        })->save($filePath.'/'.$input['imagename']);
   
        $filePath = public_path('/images');
        $image->move($filePath, $input['imagename']);
   
        return back()
            ->with('success','Image uploaded')
            ->with('fileName',$input['imagename']);
    }