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中一次性上傳所有文件,然後希望能夠點擊圖像旁邊的剪裁鏈接。
1.刪除了Ruby標籤,因爲它完全是Rails的。 2.在句子的開頭使用大寫字母。 3.使用雙倍空間進行換行4.不要在帖子中使用簽名。請參閱:http://stackoverflow.com/faq和http://stackoverflow.com/editing-help – Nakilon