File Upload trong Laravel - [Phần 7] Tạo thumbnail (ảnh thu nhỏ) với Intervention Image

Trong phần trước, mình đã chia sẻ cách upload file lên Amazon S3 hoặc MinIO và chia sẻ file tạm thời bằng Temporary URL – đảm bảo bảo mật và kiểm soát quyền truy cập.

Tuy nhiên, với các file ảnh, hiển thị ảnh gốc (full-size) trong giao diện admin hay danh sách upload là không tối ưu:

Ảnh có thể quá lớn, làm tăng thời gian tải trang
Giao diện sẽ bị vỡ bố cục nếu không kiểm soát kích thước

👉 Vì vậy, trong phần này, bạn sẽ học cách tạo thumbnail (ảnh thu nhỏ) ngay sau khi upload ảnh, sử dụng thư viện Intervention Image – giúp hệ thống gọn nhẹ và chuyên nghiệp hơn.

I. Intervention Image là gì?

Intervention Image là một thư viện PHP phổ biến giúp xử lý ảnh dễ dàng: resize, crop, thêm watermark, và nhiều chức năng khác. Laravel hỗ trợ thư viện này rất tốt thông qua Facade Image.

Trong bài này, mình sẽ dùng Intervetion Image để tạo ảnh thu nhỏ (thumbnail) – một tính năng thường thấy trong hệ thống quản lý ảnh hoặc file upload.

II. Cài đặt Intervention Image

Mình sẽ sử dụng phiên bản Intervention Image v3 - phiên bản mới nhất.

1. Yêu cầu hệ thống

Yêu cầu hệ thống để sử dụng Intervention Image

PHP >= 8.1
Mbstring PHP Extension
Image Processing PHP Extension

Mặc định khi cài Herd, PHP sẽ là bản mới nhất 8.4, hỗ trợ sẵn Mbstring PHP Extenstion và Image Process PHP Extention (Imagick).

Có thể kiểm tra PHP có Mbstring PHP Extension và Imagick chưa bằng lệnh sau

1
php -m | grep 'mbstring\|imagick'

Nếu thấy trả về kết quả như bên dưới nghĩa là hệ thống đã sẵn sàng để cài đặt Intervetion Image

1
imagick
2
mbstring

2. Cài đặt Intervention Image

Cài đặt bằng composer

1
composer require intervention/image

III. Tạo thumbnail khi upload ảnh

1. Cấu hình driver xử lý ảnh

Để có thể sử dụng Intervention Image, trước tiên cần phải import class ImageManager và chọn driver (Gd hoặc Imagick). Xem chi tiết hướng dẫn: https://image.intervention.io/v3/basics/configuration-drivers

1
use Intervention\Image\Drivers\Imagick\Driver;
2
use Intervention\Image\ImageManager;
3

4
$manager = new ImageManager(Driver::class);

2. Tạo thumbnail khi upload ảnh

Mình bổ sung đoạn code sau vào hàm store trong UploadController để tạo file thumnail có kích thước 100px x 100px

1
            // Tạo thumbnail bằng Intervention Image
2
            $thumbnail = $manager->read($file->getRealPath())
3
                ->resize(100, 100);
4

5
            // Đường dẫn tương đối của file thumbnail: 'uploads/thumbnail-ten_file_cuoi_cung.jpg'
6
            $thumbnailStoragePath = $directory . '/thumbnail-' . $finalFilename;
7

8
            // Lưu thumbnail vào disk
9
            Storage::disk($disk)->put($thumbnailStoragePath, $thumbnail->encode());

Upload thử 1 file, trên MinIO giờ sẽ tự động có thêm file thumbnail-xxx

3. Hiển thị thumbnail

Để hiển thị thumbnail của file ảnh vừa upload, mình sẽ cập nhật lại $urlFilePath như sau, thay thế $storedFilePath (path của file gốc) bằng $thumbnailStoragePath (path của file thumbnail)

1
            // Trả về Temporary URL của file
2
            $urlFilePath = Storage::disk($disk)->temporaryUrl($thumbnailStoragePath, now()->addMinutes(5));

Ảnh thumbnail 100 x 100 px giờ đã hiện ra ở phần thông báo Sucess!

Tuy nhiên, danh sách Previously Uploaded Files vẫn hiển thị ảnh gốc do trong DB chưa có thông tin của các file thumbnail được tạo ra.

IV. Lưu đường dẫn thumbnail vào database

Hiện tại, chúng ta chỉ đang lưu đường dẫn của file gốc (filename) vào table uploads. Nếu muốn hiển thị thumbnail dễ dàng, cần phải thêm một cột thumbnail vào table này.

1. Tạo migration file

1
php artisan make:migration add_thumbnail_to_uploads_table --table=uploads

Chỉnh sửa file migration

1
    public function up(): void
2
    {
3
        Schema::table('uploads', function (Blueprint $table) {
4
            $table->string('thumbnail')->nullable();
5
        });
6
    }

Chạy migration để áp dụng những thay đổi cho database

1
php artisan migrate

2. Cập nhật model Upload

Trong app/Models/Upload.php, thêm thumbnail vào $fillable:

1
protected $fillable = [
2
    'filename',
3
    'original_filename',
4
    'thumbnail',
5
];

3. Lưu thumbnail path vào database

Trong hàm store(), cập nhật phần tạo bản ghi như sau:

1
            // Tạo bản ghi mới trong table uploads của database
2
            Upload::create([
3
                'filename' => $storedFilePath,
4
                'original_filename' => $originalFilename,
5
                'thumbnail' => $thumbnailStoragePath,'
6
            ]);

Đồng thời cập nhật lại hàm destroy để hệ thống xóa luôn file thumbnail mỗi khi bấm nút Delete

1
        if (Storage::disk($disk)->exists($upload->thumbnail)) {
2
            Storage::disk($disk)->delete($upload->thumbnail);
3
        }

4. Chỉnh sửa blade để hiển thị ảnh thumbnail

Trong app/Models/Upload.php, tạo thêm hàm getThumbnailUrlAttribute để có thể truy xuất URL của thumbnail thông qua thuộc tính thumbnail_url

1
    // Tạo URL tạm thời mới mỗi khi thuộc tính 'thumbnail_url' được truy cập
2
    public function getThumbnailUrlAttribute(): string
3
    {
4
        $disk = 'minio'; // Ensure this matches the disk used for storing thumbnails
5
        if ($this->thumbnail) {
6
            // Generate temporary URL for the thumbnail path
7
            return Storage::disk($disk)->temporaryUrl($this->thumbnail, now()->addMinutes(5));
8
        }
9
        return ''; // Hoặc xử lý một cách thích hợp nếu tên tệp là null
10
    }

Cập nhật lại upload.blade.php để hiển thị file thumbnail

1
@if (count($uploads) > 0)
2
        <div class="container mx-auto mt-10 p-10 bg-white rounded-lg shadow-md max-w-md">
3
            <h2 class="text-xl font-semibold mb-4 text-gray-700">Previously Uploaded Files:</h2>
4
            @foreach ($uploads as $upload)
5
                <ul>
6
                    <li class="flex items-center justify-between mb-4">
7
                        <a class="flex items-center gap-4 py-2" href="{{ $upload->url }}" target="_blank">
8
                            <img src="{{ $upload->thumbnail_url }}" alt="{{ $upload->original_filename }}" width="50" height="50">
9
                            <span class="text-sm text-gray-700 hover:text-blue-600">{{ $upload->original_filename }}</span>
10
                        </a>
11
                        <form action="{{ route("upload.destroy", $upload->id) }}" method="POST"
12
                            style="display:inline;"
13
                            onsubmit="return confirm('Are you sure you want to delete this file?');">
14
                            @csrf
15
                            @method("DELETE")
16
                            <button type="submit"
17
                                class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>
18
                        </form>
19
                    </li>
20
                </ul>
21
            @endforeach
22
        </div>
23
    @endif

Thử nghiệm lại, tất cả đã hoạt động đúng như mong muốn.

Table uploads giờ đã có thêm 1 cột lưu đường dẫn của thumbnail.

App đã hiển thị thumbnail của các file đã upload. Khi bấm vào thumbnail, nó sẽ hiện ra file ảnh gốc.

V. Tính năng mở rộng của Intervention Image

Ngoài việc tạo thumbnail, thư viện Intervention Image còn cung cấp nhiều tính năng xử lý ảnh khác cực kỳ hữu ích cho ứng dụng thực tế

1. Resize theo kích thước mong muốn

1
$image->resize(800, 600); // Resize thành 800x600

resize() sẽ bóp ảnh nhỏ lại đúng theo kích thước mong muốn, làm sai tỉ lệ (ratio) của ảnh. Nếu muốn thu nhỏ ảnh mà vẫn giữ nguyên tỉ lệ, cần phải dùng scale()

2. Scale giữ nguyên tỉ lệ ảnh

1
$image->scale(height: 300) // Giảm kích thước về chiều cao 300px

3. Cắt ảnh

1
$image->crop(300, 300, 10, 10); // Cắt ảnh 300x300 từ góc trái (10,10)

4. Thêm hiệu ứng ảnh

Ví dụ: làm mờ (blur), tăng độ sáng (brightness), độ tương phản (contrast)

1
$image->blur(5); // Làm mờ ảnh
2
$image->brightness(-20); // Làm ảnh tối hơn
3
$image->contrast(15); // Tăng tương phản

5. Thêm watermark / text

Có thể ghi chữ lên ảnh hoặc chèn watermark:

1
$image->text('© ThuanBui.me', 10, 10, function ($font) {
2
    $font->size(24);
3
    $font->color('#ffffff');
4
});

VI. Lời kết

Trong phần 7 này, mình đã chia sẻ về cách tạo ảnh thumbnail với Intervention Image

Sử dụng Intervention Image để tạo ảnh thu nhỏ
Giảm tải giao diện, tiết kiệm băng thông
Tuỳ chọn lưu thumbnail vào cơ sở dữ liệu

Việc tạo ảnh thu nhỏ giúp hệ thống của bạn chạy nhanh hơn, gọn nhẹ hơn và tiết kiệm chi phí hơn khi hiển thị ảnh hàng loạt.

🔗 Mã nguồn

Tham khảo mã nguồn sử dụng trong [Phần 7] ở đây: https://github.com/10h30/laravel-file-upload-series/tree/part-7-thumbnail-intervention

🔜 Phần 8: Quản lý ảnh nâng cao với Spatie Media Library

Hiện tại, chúng ta đang xử lý upload, resize, lưu đường dẫn thủ công. Trong phần tiếp theo, mình sẽ chia sẻ về Spatie Media Library – một package mạnh mẽ cho việc quản lý file & ảnh trong Laravel.

Gắn file trực tiếp vào model
Tự động tạo và quản lý conversion (thumbnail, preview, v.v)
Tích hợp sẵn upload, delete, responsive images…

Hẹn gặp lại bạn trong phần 8 sẽ được ra lò vào ngày Thứ Hai, 19/05/2025!