javascript - 在上传到载波轨道之前裁剪图像

Question

非常接近我想要的解决方案但不是真正的解决方案：http ://railscasts.com/episodes/182-cropping-images?autoplay=true

我想要的是 ：-

1. 打开一个小的弹出对话框，告诉用户在单击“选择图像”输入按钮时裁剪他们的图像。

2. 在裁剪和关闭对话框时，裁剪的图像必须附加到输入字段

3. 在提交表单时，裁剪后的图像应与用户一起保存。

我考虑过但不能解决我的问题的一些方法：-

1. 在图像标签中预览选定的文件作为 blob 并以某种方式将其与表单一起发送
2. 使用cropper.js 或类似的库，并在提交表单后在下一页提交裁剪图像。

我的设计编辑表格：-

.col-md-12
  .col-md-4
  .col-md-4
  %center
    %h2 Edit Your Profile
    = form_for(resource, as: resource_name, url: registration_path(resource_[enter image description here][1]name), html: {method: :put, multipart: true}) do |f|
      = devise_error_messages!
      .field
        - if current_user.avatar.url.present?
          = image_tag(current_user.avatar.url, id: 'preview_img', style: "width: 10rem; height: 10rem;padding-bottom: 1rem;")
        = f.file_field :avatar
        = f.hidden_field :avatar_cache
      %br/
      .field
        = f.label :email
        %br/
        = f.email_field :email, autofocus: true, class: "form-control"
      - if devise_mapping.confirmable? && resource.pending_reconfirmation?
        %div
          Currently waiting confirmation for: #{resource.unconfirmed_email}
      .field
        = f.label :password
        %i (leave blank if you don't want to change it)
        %br/
        = f.password_field :password, autocomplete: "off", class: "form-control"
      .field
        = f.label :password_confirmation
        %br/
        = f.password_field :password_confirmation, autocomplete: "off", class: "form-control"
      .field
        = f.label :current_password
        %i (we need your current password to confirm your changes)
        %br/
        = f.password_field :current_password, autocomplete: "off", class: "form-control"
      %br/
      .actions
        %center
          = f.submit "Update", class: "btn btn-primary"
          / %br/
          %small= link_to "Delete Account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: 'btn btn-danger'

当我单击上传图像按钮并将其附加到单击提交时的输入字段时，希望这样的东西可以打开，以便可以使用 rails 表单进行更新。

标签： javascriptjqueryruby-on-railsrubyjcrop