Javascript 裁剪图像未保存-ruby

我正在裁剪功能中开发ruby 2.3.1和rails 3.2.13。我正在使用croper.js JavaScript库裁剪图像，并将裁剪后的图像添加到输入字段以保存在服务器中。裁剪工作正常，但裁剪后的图像无法保存

brand.rb

class Brand < ActiveRecord::Base
  belongs_to :company, :inverse_of => :brands
  mount_uploader :image, AwsBrandImageUploader
end

_裁剪特征前的form.haml：

  .span6{:style=>"margin-left:60px"}
    = f.label :image, label: '<span title="For best results upload an image with an aspect ration of 3 (wide) by 2 (high)."><i class="fa fa-info-circle fa-lg" aria-hidden="true"></i> Brand image</span>'
    %div{style: 'width:201px;height:134px;border:3px solid #EEEEEE;background:#EEEEEE;', class: 'image_preview text-center'}
      - if @brand.image?
        = image_tag @brand.image_url(:mobile400), style: 'max-width:201px;max-height:134px;', id: 'image'
      - else
        %img(src='/assets/default_produce_image.jpg'){style: 'max-width:201px;max-height:134px;', id: 'image'}
      = hidden_field(:image, :field, :value => @brand.image)
    %div{:style => 'margin-top:15px;'}
      = f.file_field :image, :class => 'filestyle', :onchange => 'imagePreview(this, "image", false)'
    %span{:id => 'error_image'}

.span6{:style=>“左边距：60px”}
=f.标签：图像，标签：“品牌图像”
%div{style:'width:201px；height:134px；border:3px solid#EEEEEE；background:#EEEEEE；'，class:'image#预览文本中心'}
-如果@brand.image？
=image_tag@brand.image_url（：mobile400），样式：'最大宽度：201px；最大高度：134px；'，id:'图像'
-否则
%img（src='/assets/default_product_image.jpg'）{style:'max width:201px；max height:134px；'，id:'image'}
=隐藏字段（：image，：field，：value=>@brand.image）
%div{:style=>'页边距顶部：15px；'}
=f.file_字段：image，：class=>'filestyle'，：onchange=>'imagePreview（此“图像”，false）'
%span{:id=>'error_image'}

_执行裁剪功能后的form.haml：

  .span6{:style=>"margin-left:60px"}
    = f.label :image, label: '<span title="For best results upload an image with an aspect ration of 3 (wide) by 2 (high)."><i class="fa fa-info-circle fa-lg" aria-hidden="true"></i> Brand image</span>'
    %div{style: 'width:201px;height:134px;border:3px solid #EEEEEE;background:#EEEEEE;', class: 'image_preview text-center'}
      - if @brand.image?
        = image_tag @brand.image_url(:mobile400), style: 'max-width:201px;max-height:134px;', id: 'image'
      - else
        %img(src='/assets/default_produce_image.jpg'){style: 'max-width:201px;max-height:134px;', id: 'image'}
      = f.hidden_field(:image, :value => @brand.image)
    %span{:id => 'error_image'}

.span6{:style=>“左边距：60px”}
=f.标签：图像，标签：“品牌图像”
%div{style:'width:201px；height:134px；border:3px solid#EEEEEE；background:#EEEEEE；'，class:'image#预览文本中心'}
-如果@brand.image？
=image_tag@brand.image_url（：mobile400），样式：'最大宽度：201px；最大高度：134px；'，id:'图像'
-否则
%img（src='/assets/default_product_image.jpg'）{style:'max width:201px；max height:134px；'，id:'image'}
=f.hidden_字段（：image，：value=>@brand.image）
%span{:id=>'error_image'}

我正在使用

CarrierWave:：MiniMagick

上传和保存图像文件。我正在使用表单post保存数据。当我使用文件字段上传图像并单击保存时，就是在服务器中保存图像。但是，当我通过crop_弹出窗口裁剪相同的图像，然后单击save（保存）时，并不保存图像

我在弹出窗口中裁剪图像，并使用字段名将裁剪后的图像添加到输入字段中。此外，我还添加了在crop实现前后对.haml文件的更改

请帮我做这个

---

谢谢。

这个答案可能会帮助一些人缩短搜索时间

这适用于使用carrierwave上传图像的用户。CarrierWave不会直接接受

base64

，而是期望映像的

ActionDispatch:：Http:：UploadedFile

实例。由于裁剪后的图像是base64，因此我们必须显式地将

base64

转换为

ActionDispatch

实例

base64_to_action_dispatch_decoder.rb

class ImageDecoder

  def self.parse_image_data(base64_image)
    filename = "cropped-image"
    in_content_type, encoding, string = base64_image.split(/[:;,]/)[1..3]

    @tempfile = Tempfile.new(filename)
    @tempfile.binmode
    @tempfile.write Base64.decode64(string)
    @tempfile.rewind

    # for security we want the actual content type, not just what was passed in
    content_type = `file --mime -b #{@tempfile.path}`.split(";")[0]

    # we will also add the extension ourselves based on the above
    # if it's not gif/jpeg/png, it will fail the validation in the upload model
    extension = content_type.match(/gif|jpeg|png/).to_s
    filename += ".#{extension}" if extension

    ActionDispatch::Http::UploadedFile.new({
        tempfile: @tempfile,
        content_type: content_type,
        filename: filename
      })
  end

end

原始来源是从

在创建/更新之前解码格式，如下所示

if params[:some_params][:image].include? "base64"
  params[:some_params] ||= {}
  params[:some_params][:image] = ImageDecoder.parse_image_data(params[:some_params][:image])
end

---

您的浏览器控制台中是否有任何错误？此外，我没有看到您在任何地方调用

cropBrandImage（）

函数。

if params[:some_params][:image].include? "base64"
  params[:some_params] ||= {}
  params[:some_params][:image] = ImageDecoder.parse_image_data(params[:some_params][:image])
end