クロップされた画像が保存されない - ルビー

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