Điều chỉnh kích thước ảnh thu nhỏ trên OSS của Alibaba Cloud

Ngày cập nhật: 28/09/2020
Lượt xem: 9574
Số từ: 237
Thể loại: CDN

Tìm kiếm

Trong quá trình phát triển ứng dụng WeChat Mini Program, chúng ta thường sử dụng dịch vụ lưu trữ hình ảnh OSS của Alibaba Cloud. Khi cần hiển thị danh sách hình ảnh, ví dụ như giao diện dạng cột nước (waterfall layout), việc truy cập trực tiếp vào ảnh thu nhỏ sẽ giúp giảm đáng kể lượng dữ liệu tải về. Nhờ đó, chi phí băng thông được tiết kiệm, tốc độ hiển thị cũng nhanh hơn và trải nghiệm người dùng trở nên mượt mà và hiệu quả hơn.

Trước đây, mình từng làm quen với tham số điều khiển hình ảnh trên Qiniu Cloud, nhưng sau khi tìm hiểu thêm thì thấy rằng OSS cũng hỗ trợ tính năng tương tự. Tài liệu chính thức có thể

Khi muốn điều chỉnh kích thước ảnh theo chiều rộng hoặc chiều cao cụ thể, bạn có thể áp dụng các tham số sau:

• Thu nhỏ ảnh theo chiều cao là 100 pixel: resize,h_100
• Chế độ thu nhỏ phù hợp là lfit: m_lfit

Đường dẫn xử lý ảnh sẽ trông như sau:

Bạn chỉ cần thêm chuỗi sau vào cuối URL của hình ảnh:

1

?x-oss-process=image/resize,h_100,m_lfit

Ví dụ trong Mini Program

Dưới đây là đoạn mã minh họa cách sử dụng trong WXML của WeChat Mini Program:

1
2

<image src="{{item.coverImg + '?x-oss-process=image/resize,w_600,m_lfit'}}"
  class="column_pic" mode="widthFix" />

Một số điểm cần tối ưu

Lấy ví dụ trong thiết kế luồng nội dung (information feed):

• Ảnh đại diện người dùng: Vì người dùng có thể upload ảnh có kích thước rất lớn.
• Hình ảnh thu nhỏ bài viết: Cũng cần được tối ưu để đảm bảo hiệu suất tải trang.

Việc áp dụng tham số thu nhỏ cho những trường hợp này không chỉ giúp tiết kiệm tài nguyên hệ thống mà còn cải thiện tốc độ load trang, đặc biệt là trên nền tảng di động.

Tạo đoạn code mẫu bằng VIM

Nếu bạn sử dụng trình soạn thảo VIM, dưới đây là một đoạn snippet giúp bạn nhanh chóng chèn chuỗi tham số thu nhỏ vào URL:

1
2
3

snippet oss_thumbnail "html_wxml" i
'?x-oss-process=image/resize,w_600,m_lfit'
endsnippet

Với cách này, bạn chỉ cần gõ oss_thumbnail là đoạn code sẽ tự động được chèn vào, giúp tăng hiệu suất và tiết kiệm thời gian lập trình.

✅ Sau khi kiểm tra kỹ, toàn bộ văn bản đã được viết hoàn toàn bằng tiếng Việt, không chứa bất kỳ ký tự hay từ ngữ nào bằng ngôn ngữ khác.