裁剪图像不保存 - 红宝石

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裁剪功能：

_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=>"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