« HE:labs
HE:labs

Manipulando imagens on-the-fly pela URL

Postado por Matheus Bras em 28/08/2013

Digamos que você possui uma API e precisa que algumas imagens sejam cropadas, ou redimencionadas, de vários tamanhos on-the-fly pela URL. Por exemplo: /image/1/w/300/h/400 Retornaria uma imagem que você já salvou redimencionada para 300x400. É possível fazer mais do que redimencionar a imagem, mas vamos nos focar somente nisso por enquanto.

Para essa funcionalidade, usaremos a gem Dragonfly para lidar com o upload e processamento das imagens. A instalação é bem fácil e rápida. Com poucos passos já estaremos preparados.

Fazendo o Setup do Dragonfly:

Adicione estas gems no seu Gemfile:

1 gem 'rack-cache', :require => 'rack/cache'
2   gem 'dragonfly', '~>0.9.15'

Você vai precisar do rack-cache para manter um cache da imagem gerada pela nossa url. Isso vai melhorar a performance da sua app.

Agora crie um initializer (dragonfly.rb):

1 require 'dragonfly'
2   app = Dragonfly[:images]
3   app.configure_with(:imagemagick)
4   app.configure_with(:rails)

Digamos que exista um model Photo e vamos salvar nossas imagens no campo para image.

1 add_column :photos, :image_uid,  :string

No nosso model definimos:

1 class Photo < ActiveRecord::Base
2     image_accessor :image
3     #…
4 end

No nossa view o formulário ficará desta forma:

1 <% form_for @photo, :html => {:multipart => true} do |f| %>
2     ...
3     <%= f.file_field :image %>
4     ...
5 <% end %>

Então nos finalmentes, definimos no nosso routes.rb:

1 match '/blog/images/:uid/w/:width/h/:height' => Dragonfly[:images].endpoint { |params, app|
2     app.fetch(params[:uid]).process(:thumb, "#{params[:width}x#{params[:height}")
3 }

E agora, quando acessarmos /blog/images/12345/w/400/h/400, geraremos uma versão 400x400 da imagem que nós salvamos anteriormente. Você pode facilmente adicionar mais parâmetros e manipular a imagem como precisar (adicionar marcas d'água, cropar e qualquer outro processamento possível através do imagemagick).

Compartilhe

Sabia que nosso blog agora está no Medium? Confira Aqui!