Thiết kế web với framework Laravel NenTang.vn Chương 12-Bài 9. Cách tự động sinh Ảnh nhiều kích cỡ (Automatic resize image) khi upload file Ảnh Tác giả: Dương Nguyễn Phú Cường Ngày đăng: 2 năm trước 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']); } Về trang chủ Về Khóa học Bài học trước Bài học tiếp theo Sản phẩm của Nền tảng NenTang.vn