Question

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

我想要什么：-

打开一个小的弹出对话框，告诉用户单击“选择图像”输入按钮时裁剪图像。
在裁剪和关闭对话框时，裁剪后的图像必须附加到输入字段
在提交表单时，裁剪后的图像应与用户一起保存。

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

预览所选文件作为image标签中的blob，并以某种形式发送
使用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'

want something like this to open up when I click upload image button and attach it to input field on clicking submit so it can be updated with the rails form.

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

0 个答案: