通过转到另一个页面(即crop.html.erb),我成功实现了剪贴画功能。但我希望能够在当前页面上进行所有裁剪,在弹出div/对话框中上传图像。因此,我需要在单击时将crop.html.erb页面加载到弹出的div中。这是crop页面上的代码:
<% 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或者类似的东西上,或者我是不是方向错了?
顺便说一下,我并不是简单地一次上传一个图片,所以我不能让它去到一个裁剪页面,然后回来。我一次上传所有的文件,然后希望能够点击一个图片旁边的裁剪链接。
You need to make changes similar to this:
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
map.resources :photos, :member => {:crop => :get}
<%= link_to "Crop", crop_photo_path(@photo) %>