Вопрос:

Обрезанное изображение не сохраняется - рубин

javascript ruby-on-rails ruby

137 просмотра

1 ответ

545 Репутация автора

Я работаю над ruby 2.3.1и rails 3.2.13в функции обрезки. Я использую JavaScript-библиотеку cropper.js для обрезки изображения и добавления обрезанного изображения в поле ввода для сохранения на сервере. Обрезка работает нормально, но обрезанное изображение не сохраняется.

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 до и после реализации обрезки.

Пожалуйста помоги мне с этим.

Спасибо.

Автор: user2681579 Источник Размещён: 02.03.2017 03:07

Ответы (1)


0 плюса

545 Репутация автора

Этот ответ может помочь кому-то с минимальным временем поиска,

Это подходит для тех, кто использует 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
Автор: user2681579 Размещён: 07.03.2017 09:50
Вопросы из категории :
32x32