Sử dụng Cloudinary để quản lý ảnh cho ứng dụng của bạn
This post hasn't been updated for 8 years
Cloudinary là gì?
Cloudinary là một cloud-based service, nó cung cấp một giải pháp quản lý hình ảnh bao gồm upload, lưu trữ, thao tác, tối ưu hóa và delivery.
Với cloudinary bạn có thể dễ dàng upload ảnh lên cloud, tự động thực thi các thao tác với ảnh một cách thông minh mà không cần phải cài đặt bất kì một phần mềm phức tạp nào khác. Cloudinary cung cấp các APIs toàn diện và màn hình quản lý giúp chúng ta dễ dàng tích hợp vào các trang web và ứng dụng di động.
Những tính năng chính
Cloudinary cung cấp một Ruby Gem để dễ dàng cho việc tương tác với các app viết bởi ngôn ngữ Ruby với một số framwork như là Rails hay Sinatra với các tương tác chính sau:
- Xây dựng các URL để chuyển đổi và thao tác với hình ảnh
- Rails view helper cho việc nhúng và thay đổi hình ảnh
- API wrappers: upload image, quản lý và nhiều thứ khác
- Upload image trực tiếp từ trình duyệt sử dụng một jQuery plugin.
- Tích hợp với Active Record
- CarrierWave plugin
- Hình ảnh tĩnh đồng bộ với CDN delivery
- Migration tool
Làm thế nào để sử dụng
Dưới đây mình sẽ giới thiệu cho các bạn hướng dẫn sử dụng cho Rails app. Trước tiên để sử dụng bạn cần có tài khoản cloudinary, nếu chưa có bạn có thể đăng kí tại đây. Sau khi đăng kí thành công bạn nhớ check mail để verification tài khoản của mình nếu không thì sẽ chỉ sử dụng được tài khoản đó trong 1-2 ngày. Cloudinary có bản free và trả phí, tùy thuộc vào nhu cầu mà bạn có thể chọn gói phù hợp cho mình. Bạn có thể xem chi tiết tại đây
1. Cài đặt
Để cài đặt gem cloudinary bạn có thể làm như sau
Trong terminal gõ lệnh sau
gem install cloudinary
Hoặc có thể chỉnh Gemfile, thêm gem cloudinary và chạy bundler
gem 'cloudinary'
Nếu bạn sử dụng optional là upload ảnh với Active Record sử dụng CarrierWave thì bạn cần thêm gem carrierwave và bundler lại
gem 'carrierwave'
gem 'cloudinary'
2. Configuration
Để sử dụng cloudinary bạn cần config cloud_name, api_key và api_secret. Những settings này bạn hoàn toàn có thể sử dụng, truyền vào trong mỗi request mà bạn gửi đi hoặc là sử dụng file config cục bộ trong Rails app là cloudinary.yml. Bạn hoàn toàn có thể dowload nó tại trang màn hình quản lý của mình.https://cloudinary.com/console. Dưới đây là file config mẫu:
development:
cloud_name: ngocnguyen
api_key: '874837483274837'
api_secret: a676b67565c6767a6767d6767f676fe1
...
Bạn cũng có thể xem thêm các option cho config tại đây
3. Upload image
Bây giờ bạn có thể upload image và bất kì file nào từ Ruby code hoặc Ruby on rails server. Bạn có thể sử dụng lệnh sau để update dựa vào các params truyền vào là cloud_name, api_key và api_secret.
auth = {
cloud_name: "somename",
api_key: "1234567890",
api_secret: "FooBarBaz123"
}
Cloudinary::Uploader.upload("my_picture.jpg", auth)
Image truyền vào có thể là đường dẫn tương đối hoặc một url ảnh bất kì.
Nếu bạn sử dụng carrierwave để upload ảnh thì có thể sử dụng như sau: (lưu ý, bạn cần cài đặt gem như trên bước 2, và đặc biệt cần đặt gem carrierwave trước cloudinary)
Sau khi generate Uploader, Trong file Uploader bạn cần include Cloudinary::CarrierWave.
class ImageUploader < CarrierWave::Uploader::Base
include Cloudinary::CarrierWave
....
end
Trong model cần upload file bạn vẫn config và sử dụng bình thường như đối với carrierwave.
class Post < ActiveRecord::Base
...
mount_uploader :picture, ImageUploader
...
end
Tương tự như trong view ta sẽ hiện thì upload file như sau:
= form_for(:post) do |post_form|
= post_form.hidden_field(:picture_cache)
= post_form.file_field(:picture)
Trong đó hỗ trợ một trường hidden là :picture_cache để khi mà page reloading hay validation errors thì sẽ không mất image đã upload.
4. Hiển thị và thao tác với image
Mỗi image update sẽ có một public ID, bạn hoàn toàn có thể sử dụng public ID của image để hiện thị ảnh đó. Ví dụ một ảnh có image id là "sample" ta có thể hiện thị ảnh như sau:
cl_image_tag("sample.jpg", :alt => "Sample Image")
Hoặc có thể dùng địa chỉ tuyệt đói của bức ảnh đó để hiện thị như sau
image_tag(
"http://res.cloudinary.com/demo/image/upload/w_100,h_150,c_fill/sample.jpg",
:width => 100, :height => 150)
Hay đối với Rails app, với một product bạn có thể hiện thị ảnh như sau
<%= image_tag @product.picture.url, alt: @product.name %>
Demo
https://github.com/nguyenngoc2505/cloudinary_demo
Tham khảo
All Rights Reserved
