Screencast: Bilder ausschneiden

Download: Download(46.3 MB, 14:07) Alternativer Download für iPod & Apple TV (22.4 MB, 14:07)

Resourcen:

• Episode 134: Paperclip
• jQuery
• Jcrop
• jsCropperUI
• rjcrop
• Full episode source code

Quellcode:

[ruby]

# models/user.rb class User < ActiveRecord::Base has_attached_file :avatar, :styles => { :small => “100x100#”, :large => “500x500>” }, :processors => [:cropper] attr_accessor :crop_x, :crop_y, :crop_w, :crop_h after_update :reprocess_avatar, :if => :cropping?

def cropping? !crop_x.blank? && !crop_y.blank? && !crop_w.blank? && !crop_h.blank? end

def avatar_geometry(style = :original) @geometry ||= {} @geometry[style] ||= Paperclip::Geometry.from_file(avatar.path(style)) end

private

def reprocess_avatar avatar.reprocess! end end

# users_controller.rb def create @user = User.new(params[:user]) if @user.save if params[:user][:avatar].blank? flash[:notice] = “Successfully created user.” redirect_to @user else render :action => “crop” end else render :action => ‘new’ end end

def update @user = User.find(params[:id]) if @user.update_attributes(params[:user]) if params[:user][:avatar].blank? flash[:notice] = “Successfully updated user.” redirect_to @user else render :action => “crop” end else render :action => ‘edit’ end end

# lib/paperclip_processors/cropper.rb module Paperclip class Cropper < Thumbnail def transformation_command if crop_command crop_command + super.sub(/ -crop S+/, ”) else super end end

def crop_command target = @attachment.instance if target.cropping? ” -crop ’#{target.crop_w.to_i}x#{target.crop_h.to_i}+#{target.crop_x.to_i}+#{target.crop_y.to_i}’” end end end end [/ruby]

[html] <% title “Crop avatar” %> <% content_for(:head) do %> <%= stylesheet_link_tag “jquery.Jcrop” %> <%= javascript_include_tag “jquery.Jcrop.min” %>

function update_crop(coords) { var rx = 100/coords.w; var ry = 100/coords.h; $(‘#preview’).css({ width: Math.round(rx * <%= @user.avatar_geometry(:large).width %>) + ‘px’, height: Math.round(ry * <%= @user.avatar_geometry(:large).height %>) + ‘px’, marginLeft: ’-’ + Math.round(rx * coords.x) + ‘px’, marginTop: ’-’ + Math.round(ry * coords.y) + ‘px’ }); var ratio = <%= @user.avatar_geometry(:original).width %> / <%= @user.avatar_geometry(:large).width %>; $(“#crop_x”).val(Math.round(coords.x * ratio)); $(“#crop_y”).val(Math.round(coords.y * ratio)); $(“#crop_w”).val(Math.round(coords.w * ratio)); $(“#crop_h”).val(Math.round(coords.h * ratio)); } </script> <% end %>

<%= image_tag @user.avatar.url(:large), :id => “cropbox” %>

Preview:

<% form_for @user do |f| %> <% for attribute in [:crop_x, :crop_y, :crop_w, :crop_h] %> <%= f.hidden_field attribute, :id => attribute %> <% end %>

<%= f.submit “Crop” %>