Question

我一直在尝试实现Jcrop，以便当用户上传他们的图像时，他们可以裁剪他们的图像并在预览中看到这种裁剪的样子。

除了预览似乎正在拉伸我的图像并扭曲它们的宽度之外，一切都终于正常工作了。

我目前的代码如下：

Crop.html.erb

<% content_for :head do %>
    <script type="text/javascript" charset="utf-8">
        $(function() {
          $('#cropbox').Jcrop({
            onChange: update_crop,
            onSelect: update_crop,
            setSelect: [0, 0, 300, 300],
            aspectRatio: 1
          });
        });

        function update_crop(coords) {
            var rx = 100/coords.w;
            var ry = 100/coords.h;
            var lw = $('#cropbox').width();
            var lh = $('#cropbox').height();
            var ratio = <%= @user.avatar_geometry[:width] %> / lw ;

          $('#preview').css({
            width: Math.round(rx * lw) + 'px',
            height: Math.round(ry * lh) + 'px',
            marginLeft: '-' + Math.round(rx * coords.x) + 'px',
            marginTop: '-' + Math.round(ry * coords.y) + 'px'
          });
          $("#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(:normal), :id => "cropbox" %>

<h3>Preview</h3>
<div class="preview">
    <%= image_tag @user.avatar_url(:thumb), :id => "preview" %>
</div>

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

如果有人知道我哪里出错了会很棒吗？在此先感谢您的帮助！

Jcrop Javascript图像预览扭曲

0 个答案: