Quản lý và xử ảnh với Carrierwave version

upload ảnh là một chức năng cơ bản của nhiều website và nhất là những mạng xã hội. Nhưng việc xử lý và hiển thị ảnh sao cho đẹp là một điều không hề dễ dàng. Nhưng với Carrierwave chúng ta có thể quản lý và xử lý ảnh một cách rất dễ dàng và đơn giản. Sau đây chúng ta sẽ cùng tìm hiểu về cách xử lý ảnh của gem Carrierwave.

1.Cài đặt

Với những bạn chưa từng sử dụng và chưa biết cách cài đặt gem Carrierwave thì có thể tham khảo tại bài viết này: https://viblo.asia/TuyenNguyen/posts/w5WQvz7eRk3E . Vì thời gian có hạn nên mình sẽ không nhắc lại nữa. Lưu ý: để có thể tạo version và sử lý ảnh, bạn cần thêm gem RMagick vào gemfile

gem 'rmagick'

sau đó chạy bundle install, và cuối cùng là include thêm thư viện mở rộng RMagick bằng cách thêm dòng lệnh include CarrierWave::RMagick vào uploader của mình

class ImageUploader < CarrierWave::Uploader::Base
   include CarrierWave::RMagick
 
 end

2. Version trong Carrierwave

Carrierwave cung cấp chức năng tạo các version của ảnh với các kích thước khác nhau trước khi lưu. Có nghĩa là bạn chỉ cần định nghĩa các version trong file uploader và carrierwave sẽ làm những việc còn lại. Để dễ hiểu hơn thì chúng ta hãy xem ví dụ sau:

tôi có một model là Image và ảnh được lưu tại trường picture.

class Image < ApplicationRecord
  mount_uploader :picture, ImageUploader

end

và tôi có một uploader tên là ImageUploader và định nghĩa 3 version

class ImageUploader < CarrierWave::Uploader::Base
  version :avatar do
    process resize_to_limit: [300, 300]
  end

  version :thumb do
    process resize_to_fit: [300, 300]
  end

  version :eyecatch do
    process resize_to_fill: [300, 300]
  end

Ở đây tôi sử dụng 3 hàm để xử lý ảnh là resize_to_limit, resize_to_fit và resize_to_fill và tạo ra 3 version là avatar, thumb và :eyecatch Như vậy, khi tôi thực hiện upload 1 ảnh bất kỳ lên thì Carrierwave sẽ lưu 1 bản original chính là bức ảnh nà bạn upload lên, kèm theo 3 version khác có tên như tên như trên. và bạn có thể hiển thị các version tùy theo mục đích của mình.

• Hàm resize_to_limit [300, 300] sẽ tạo ra một version với width, height <= 300 (trừ trường hợp width <= 300 && height <= 300), và giữ nguyên tỉ lệ của bức ảnh. Có nghĩa là nếu bạn upload lên 1 bức ảnh có độ phân giải 200x400 thì Carrierwave sẽ tạo cho bạn một version avatar có độ phân giải 150x300
• Hàm resize_to_fit [300, 300] Sẽ thay đổi kích thước hình ảnh để phù hợp với kích thước truyền vào trong khi vẫn giữ nguyên tỉ lệ. Chiều rộng hoặc chiều dài của hình ảnh có thể ngắn hơn hoặc hẹp hơn nhưng sẽ không lớn hơn các giá trị truyền vào.
• process resize_to_fill: [300, 300] Sẽ thay đổi kích thước hình ảnh để phù hợp với kích thước truyền vào trong khi vẫn giữ tỷ lệ các cạnh của hình ảnh ban đầu. trong trường hợp tỉ lệ chiều dài/rộng của ảnh và giá trị truyền vào khác nhau thì Carierwave sẽ crop ảnh theo tỉ lệ được truyền vào ở vị trí trung tâm. ví dụ trong trường hợp này, khi bạn upload một bức ảnh có độ phân giải là 750 px. Thì đầu tiên Carierwave sẽ tiến hành resize về 300 Tip: trong trường hợp bạn không muốn tạo version mà muốn xử lý ngay ảnh gốc trước khi lưu vào DB thì bạn chỉ cần đặt dòng lệnh process resizeto...: [, ] bên ngoài phần khai báo version

3. Hiển thị Version trên view

Có 2 cách để lấy ra url của version ảnh trong Carrierwave trên view. Ví dụ tôi có 1 object image của model Image:

image.picture.thumb.url
# or
image.picture_url(:thumb)

Trong đó thumb là tên của version, trong trường hợp bạn không truyền tên version thì carrierwave sẽ hiển thị chiếc ảnh original mà bạn upload lên. Tương tự, để hiển thị ảnh lên view thì bạn chỉ cần truyền url của bức ảnh vào application_helper image_tag

<%= image_tag image.picture_url(:thumb) if image.picture? %>
#or
<%= image_tag image.picture.thumb.url if image.picture? %>

Trên đây là bài giới thiệu về xử lý ảnh với Carrierwave và RMagick của tôi, cảm ơn các bạn đã theo dõi