Rails paperclip and upside down oriented images
Asked Answered
D

4

12

I've recently encountered a problem where a user uploads an image and somewhere along the lines, paperclip is flipping it upside down.

The image in question can be seen here http://photoramblr.com/photos/36

As you see, the image is upside-down; but drag the image to your desktop and it will appear rightside-up. Since this image was taken on an iPhone I can only assume this is related to the image's orientation setting on the iPhone. Has anyone encountered anything like this or have any suggestions on how to address this?

The code here is pretty straightforward Paperclip lingo:

class Photo < ActiveRecord::Base
  has_attached_file :image,
    :storage => :s3,
    :s3_credentials => S3_CREDENTIALS,
    :styles => {
      :thumb => "100x100#",
      :small => "138x138>",
      :large => "580x580>",
      :x_large => "1600x1600>"}

Update

Hm, I was able to fix this by taking a screenshot of the image and uploading that. There must have been something in the meta-data that was setting the correct orientation that didn't make its way through.

Diorama answered 4/3, 2012 at 20:46 Comment(0)
T
11

Yes, this is a problem we solved last week where I work. :) If you're using ImageMagick/RMagic for image processing, you can use Image#auto_orient to "rotate or flip the image based on the image's EXIF orientation tag"; call this method on the image in a Paperclip processor and you should be good to go.

[Edit]

You may be interested in Rails, Paperclip, -auto-orient, and resizing.... I also found it interesting that CarrierWave made this process very easy:

class ImageUploader < CarrierWave::Uploader::Base
  ... # config here

  process :rotate

  def rotate
    manipulate! do |image|
      image.auto_orient
    end
  end
end
Tseng answered 5/3, 2012 at 0:52 Comment(3)
Hey thanks for the advice; I will certainly be implementing this.Diorama
This is what worked for me def rotate manipulate! do |img| img.auto_orient img = yield(img) if block_given? img end endYerga
I had to change this to image.tap(&:auto_orient) otherwise I would get NoMethodError: undefined method destroy!' for true:TrueClass`Topee
G
5

Source File Options

Paperclip added a source_file_options that allow you to pass processor options that get applied directly on the source file and before generating the subsequent thumbnails and styles.

You can add this to automatically orient your source file, like so:

class Photo < ActiveRecord::Base
  has_attached_file :image,
    storage:             :s3,
    s3_credentials:      S3_CREDENTIALS,
    source_file_options: { all:     '-auto-orient' },
    styles:              { thumb:   "100x100#",
                           small:   "138x138>",
                           large:   "580x580>",
                           x_large: "1600x1600>" }

This should be available since version 2.3.16 of the gem.

For more information, see the following issue on Paperclip's Github repo:

https://github.com/thoughtbot/paperclip/issues/591

Original Style

It's also not a terrible idea to set an original style in order to create an auto-oriented and size-limited version, like so:

original: "5000x5000>"

CAUTION: However, if you're expecting to get uploads that are not just images, like PDFs, it will cause problems by not keeping the original PDF and just storing an image of the first page of the PDF.

Gaff answered 6/1, 2015 at 20:44 Comment(0)
I
0

This is the solution that finally worked for me:

process :rotate
def rotate
  manipulate! do |img|
    img.auto_orient
    img = yield(img) if block_given?
    img
  end
end
Intension answered 10/11, 2013 at 3:48 Comment(0)
S
0

Just add original: {convert_options: '-auto-orient'} to your style like this

has_attached_file :image,
:storage => :s3,
:s3_credentials => S3_CREDENTIALS,
:styles => {original: {convert_options: '-auto-orient'},
  :thumb => "100x100#",
  :small => "138x138>",
  :large => "580x580>",
  :x_large => "1600x1600>"}
Slavism answered 4/1, 2016 at 12:45 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.