裁剪圖像不保存 - 紅寶石

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