裁剪的图像未保存 - 红宝石

Question

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

品牌.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