Cấu hình Nginx trên CentOS để resize hoặc crop image

C

Giới thiệu

Có bao giờ bạn tự hỏi mấy trang web lớn nó xử lý resize hay crop hình ảnh như thế nào không, ví dụ trang youtube https://i.ytimg.com/vi?w=12=h=12, bạn hãy để ý các tham số ở sau hqdefault.jpg ta có thể dễ dàng dùng Nginx để làm điều đó mà cụ thể là module ngx_http_image_filter_module. Vì vậy trong bài viết này tôi sẽ hướng dẫn bạn làm điều đó

Cài đặt

Trước tiên ban cần phải đặt nginx trên OS của bạn với centos bạn chỉ cần chạy lệnh sau:

###
yum install nginx -y

Sau đó bạn cần cài module ngx_http_image_filter_module vì mặt định Nginx không có cài nó, để cài đặt nó chỉ cần chạy lệnh sau:

###
yum install nginx-mod-http-image-filter.x86_64 -y

Chú ý rằng nếu bạn không tìm thấy module bạn có thể dùng lệnh dưới đây để tìm nó

yum search nginx | grep nginx-mod-http
nginx-mod-http-image-filter.x86_64 : Nginx HTTP image filter module

Cấu hình bộ lọc hình ảnh

Một cấu hình đơn giản cho việc chuyển đổi một định dạng jpg thành thumbnail với kích thước 150 * 150 như sau:

location ~ /images/.*\.jpg$ {
image_filter crop 150 150;
}

Mở rộng hơn, chúng ta sẽ cấu hình với tính năng resize hoặc crop hình ảnh theo các bước như sau :

Chúng ta kiểm tra sự hiện diện của các thông số được truyền vào, nếu không có, chúng ta phải trả lại hình ảnh bình thường

location ~ /images/.*\.jpg$ {
if ($query_string ~ .*=.*) {
rewrite ^/images/(.*\.jpg)$ /image_filter/$1 last;
}
}

Kế tiếp, chúng ta sẽ kiểm tra thông số truyền vào là resize hay là crop, mặc định nếu không có thông số truyền vào là crop :

if ($arg_type = “resize”) {
rewrite ^ /resize last;
}
rewrite ^ /crop last;

Ứng với resize hay crop, hình ảnh được chuyển đổi sẽ được trả về.
image_filter resize $width $height;
image_filter crop $width $height;
Trong trường hợp bộ lọc hình ảnh không xử lý được, lỗi 415 sẽ xảy ra, vì vậy chúng ta nên thay thế bằng 1 hình ảnh GIF có kích thước 1 * 1 px.

Dưới đây là một cấu hình hoàn chỉnh với bộ lọc hình ảnh :

server {
listen 80;
server_name ama.phanbook.com;
root /usr/share/nginx/html/images/;

location ~ /images/.*\.jpg$ {
if ($query_string ~ .*=.*) {
rewrite ^/images/(.*\.jpg)$ /image_filter/$1 last;
}
}
location / {

}
location ~ ^/image_filter/(.*\.jpg)$ {
internal;

set $file $1;
set $width 150;
set $height 150;
set $quality 75;

if ($arg_width ~ (\d*)) {
set $width $1;
}
if ($arg_height ~ (\d*)) {
set $height $1;
}
if ($arg_quality ~ (100|[1-9][0-9]|[1-9])) {
set $quality $1;
}

if ($arg_type = “resize”) {
rewrite ^ /resize last;
}

rewrite ^ /crop last;
}

location /resize {
internal;
rewrite ^ /images/$file break;
image_filter resize $width $height;
image_filter_jpeg_quality $quality;
error_page 415 = @empty;
}

location /crop {
internal;
rewrite ^ /images/$file break;
image_filter crop $width $height;
image_filter_jpeg_quality $quality;
error_page 415 = @empty;
}

location @empty {
empty_gif;
}
}

Ok, bây giờ bạn chỉ cần tạo file đó trong thư mục của Nginx sau đó khỏi động lại

service nginx restart

Kiểm tra kết quả

Bạn có thể truy cập đương dẫn này đế test

http://blog.codelovers.vn/images/abc.jpg?width=500&height=150&type=resize
http://blog.codelovers.vn/images/abc.jpg?width=500&height=150&type=crop
http://blog.codelovers.vn/images/abc.jpg?width=400&height=400&type=crop&quality=110

Chú ý rằng trong cấu hình trên chúng tôi chưa có lưu cache cho mỗi lần request từ url do đó khi bạn apply lên trang production thì nên bật cache lên để đảm bảo tối đa tốc độ website của bạn

Tagcloud

Posts