Question

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

brand.rb

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

crop_popup.haml

:javascript
  jQuery(function($) {
    $('#cropperImage').cropper({
      aspectRatio: 16 / 9,
      crop: function(dataNew) {
        // Output the result data for cropping image.        
      }
    });    
  });

  function cropBrandImage() {
    var croppedImage = $('#cropperImage').cropper('getCroppedCanvas').toDataURL('image/jpeg');

    $('#image').attr('src', croppedImage);
    $('[name="brand[image]"]').val(croppedImage); //add the cropped image to the input field using field name
  }

裁剪功能之前

_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'}

实现裁剪功能后

_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'}

我正在使用CarrierWave::MiniMagick上传和保存图片文件。我正在使用表格帖子来保存数据。当我使用文件字段上传图像并单击“保存”时，将图像保存在服务器中。但是，当我通过crop_popup裁剪相同的图像，然后单击“保存”不保存图像。

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

请帮我解决这个问题。

谢谢。

Answer 1

这个答案可能会帮助一个搜索时间最短的人，

这适用于使用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

原始来源来自https://gist.github.com/ifightcrime/9291167a0a4367bb55a2。

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

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

裁剪图像不保存 - 红宝石

1 个答案: