Active Storage - some techniques
Requirements
- Install ImageMagick or libvips.
- Install
image_processing
gem
1. Get the dimension size of an image
For example, we have a model MediaAsset
like this:
class MediaAsset < ApplicationRecord
validates :media_file, presence: true
end
If the blob has been analyzed, you can access the image's dimension by:
media_file = MediaAsset.find(2).media_file
media_file.metadata
# => {"identified"=>true, "analyzed"=>true, "width"=>1000, "height"=>1017}
media_file.metadata["width"] # or height
You must call analyze()
method if the blob hasn't been analyzed.
media_file.analyzed? # => false
media_file.analyze
By default, analyze_later()
is automatically called for a blob when it's attached for the first time.
2. Upload the remote file from URL
Just use open-uri
to open the image from url and attach it as a local file:
require 'open-uri'
file = URI.open('https://www.balisafarimarinepark.com/wp-content/uploads/2019/07/leopard-bali-safari-park.jpg')
media_asset.media_file.attach(io: file, filename: 'some-image.jpg')
Or if you want to save with a filename:
uri = URI("https://www.balisafarimarinepark.com/wp-content/uploads/2019/07/leopard-bali-safari-park.jpg")
filename = File.basename(uri.path)
media_asset.media_file.attach(io: file, filename: filename)
3. Transform the image
You can crop, resize or rotate images by using variant
method, here are some samples:
# Change the format of the image
media_file.variant(format: :jpg)
# Rotate the image 90°
media_file.variant(rotate: 90)
# Resizes the image to fill the specified dimensions while retaining the original aspect ratio.
# If necessary, will crop the image in the larger dimension.
media_file.variant(resize_to_limit: [500, 500])
# Resizes the image to fit within the specified dimensions while retaining the original aspect ratio.
# Will downsize the image if it's larger than the specified dimensions or upsize if it's smaller.
media_file.variant(resize_to_fit: [500, 500])
View more: https://edgeguides.rubyonrails.org/active_storage_overview.html#transforming-images