Rails 5 jquery文件上传图像方向旋转90度,适用于人像

时间:2017-04-22 17:59:15

标签: ruby-on-rails-5 jquery-file-upload

将图片上传到我的s3帐户后,我的图像方向出现问题。显示图像时,纵向图像旋转90度。这是我在Heroku - Direct to S3 Image Uploads in Rails教程中使用的咖啡脚本。

# Use this instead of jQuery -> with Turbo links. Turbo links will trigger the ready page:load.
document.addEventListener 'turbolinks:load', ->

  $('.directUpload').find('input:file').each (i, elem) ->
    fileInput = $(elem)
    form = $(fileInput.parents('form:first'))
    submitButton = form.find('input[type="submit"]')
    progressBar = $('<div class=\'bar\'></div>')
    barContainer = $('<div class=\'progress\'></div>').append(progressBar)
    fileInput.after barContainer
    fileInput.fileupload
      fileInput: fileInput
      url: form.data('url')
      type: 'POST'
      autoUpload: true
      formData: form.data('form-data')
      paramName: 'file'
      dataType: 'XML'
      replaceFileInput: false
      progressall: (e, data) ->
        progress = parseInt(data.loaded / data.total * 100, 10)
        progressBar.css 'width', progress + '%'
        return
      start: (e) ->
        submitButton.prop 'disabled', true
        progressBar.css('background', 'green').css('display', 'block').css('width', '0%').text 'Loading...'
        return
      done: (e, data) ->
        submitButton.prop 'disabled', false
        progressBar.text 'Uploading done'
        # extract key and generate URL from response
        key = $(data.jqXHR.responseXML).find('Key').text()
        url = '//' + form.data('host') + '/' + key
        # create hidden field
        input = $('<input />',
          type: 'hidden'
          name: fileInput.attr('name')
          value: url)
        form.append input
        return
      fail: (e, data) ->
        submitButton.prop 'disabled', false
        progressBar.css('background', 'red').text 'Failed'
        return
    return
  return

我使用image_tag显示我的S3帐户中的图片。

= image_tag current_company.logo.image_url

我不确定我需要做些什么来修复方向。我确实在blueimp/jQuery-File-Upload/wiki/Options#imageorientation找到了这个,但不知道这是我正在寻找的,或者如果它是如何使用它。任何帮助将不胜感激。

这是我第一次在这里发帖,所以请保持温和。

0 个答案:

没有答案