2009-12-16 103 views
1

我已成功實現jcrop和回形針通過轉到另一頁裁剪圖像(即crop.html.erb)。但我希望能夠在當前頁面上完成所有裁剪,並在彈出的div /對話框中上傳圖像。所以不知何故,我需要加載crop.html.erb頁面點擊一個彈出的div。這裏是作物網頁上的代碼rails jcrop + paperclip

<% content_for :javascript do %> 
    <%= stylesheet_link_tag "jquery.Jcrop" %> 
    <%= javascript_include_tag "jquery.Jcrop.min" %> 

<% end %> 

<script type="text/javascript" charset="utf-8"> 

$(function() { 
    $('#cropbox').Jcrop({ 
    onChange: update_crop, 
    onSelect: update_crop 
    }); 
}); 


function update_crop(coords) { 
    var rx = 100/coords.w; 
    var ry = 100/coords.h; 
    $('#preview').css({ 
    width: Math.round(rx * <%= @photo.photo_geometry(:biggest).width %>) + 'px', 
    height: Math.round(ry * <%= @photo.photo_geometry(:biggest).height %>) + 'px', 
    marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
    marginTop: '-' + Math.round(ry * coords.y) + 'px' 
    }); 
    var ratio = <%= @photo.photo_geometry(:original).width %>/<%= @photo.photo_geometry(:biggest).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> 


<%= image_tag @photo.photo.url(:biggest), :id => "cropbox" %> 

<h4>Preview:</h4> 
    <div style="width:100px; height:100px; overflow:hidden"> 
     <%= image_tag @photo.photo.url(:biggest), :id => "preview" %> 
    </div> 


<% form_for @photo do |f| %> 
    <% for attribute in [:crop_x, :crop_y, :crop_w, :crop_h] %> 
    <%= f.hidden_field attribute, :id => attribute %> 
    <% end %> 
    <p><%= f.submit "Crop" %></p> 
<% end %> 

可我只是把它添加到一個div或類似的東西,還是我的方法了嗎?

順便說一句,我不是簡單地一次上傳一張圖片,所以我不能讓它得到一個裁剪頁,然後回來。我使用uploadify在頁面上的彈出式div中一次性上傳所有文件,然後希望能夠點擊圖像旁邊的剪裁鏈接。

+0

1.刪除了Ruby標籤,因爲它完全是Rails的。 2.在句子的開頭使用大寫字母。 3.使用雙倍空間進行換行4.不要在帖子中使用簽名。請參閱:http://stackoverflow.com/faq和http://stackoverflow.com/editing-help – Nakilon

回答

1

你需要做類似這樣的變化:

在photos_controller.rb

def create 
    @photo = Photo.new(params[:photo]) 
    if @photo.save 
    flash[:notice] = "Successfully created photo." 
    redirect_to @photo 
    end 
end 

def update 
    @photo = Photo.find(params[:id]) 
    if @photo.update_attributes(params[:photo]) 
     flash[:notice] = "Successfully updated photo." 
     redirect_to @photo 
    end 
end 

def crop 
    @photo = Photo.find(params[:id]) 
end 

在routes.rb中

map.resources :photos, :member => {:crop => :get} 
在照片

/show.html.erb

<%= link_to "Crop", crop_photo_path(@photo) %>