Vote #79279
完了Handle image orientation of attachments and thumbnails
0%
説明
From time to time, images may have a different orientation than their byte stream suggests. E.g. this apparently happens when taking a picture with an iPhone. The proper orientation is then stored in the exif data. The image data (technical orientation) combined with the exif data will result in a properly oriented image (natural orientation).
Currently Redmine does not handle this. Instead, images will always be displayed in their technical orientation. But there are some things we can do to improve the situation.
h2. Browser support
When including images into a textile-enabled text, the browser might or might not use the exif data to rotate/flip the image.
- Mobile Safari will show the image in natural orientation automatically
- Firefox will show the image in natural orientation if the CSS Property @image-orientation: from-image;@ is used
- Chrome and Mobile Chrome will show the image in natural orientation only, if it's displaying the image directly, not when embedded into an HTML page.
- IE seems to act similar to Chrome, but I don't have a machine to test that at the moment.
When displaying thumbnails, the images will always be shown in their technical orientation, since the thumbnailing will remove the relevant exif data without changing the orientation.
h2. Proposed change
The attached patch will add the CSS property, so that Firefox will display images in their natural orientation. Furthermore it changes the thumbnailing, so that imagemagick's convert will read the exif orientation and rotate/flip the image before thumbnailing. This way, the thumbnails will also be show in their natural orientation.
Fixing the orientation in Chrome/IE and Desktop Safari seems to involve reading the exif data within the browser and applying transformation via CSS or Canvas. This seemed to be too much code for this kind of feature, so I did not follow this approach.
The attached patch was created against r17305.
h2. How to reproduce
To test this feature, I've used the example images by "Matt Galloway":http://www.galloway.me.uk/2012/01/uiimageorientation-exif-orientation-sample-images/. (c) CC BY NC ND Matt Galloway - 2012
and a wiki page with the following content:
!{height: 100px}down-mirrored.jpg! !{height: 100px}down.jpg! !{height: 100px}left-mirrored.jpg! !{height: 100px}left.jpg!
!{height: 100px}right-mirrored.jpg! !{height: 100px}right.jpg! !{height: 100px}up-mirrored.jpg! !{height: 100px}up.jpg!
h2. Screenshots
Before:
!{width:500px}before.png!
After the changes:
in Firefox:
!{width:500px}after_ff.png!
and in Chrome/Desktop Safari/IE:
!{width:500px}after_chrome.png!
journals
While testing this patch, I noticed that many image manipulating software supports Exif orientation and seeing improperly oriented images without using Redmine was difficult for me.
I think this small patch is very useful and also Redmine should support Exif orientation. I suggest delivering this feature in the next release.
--------------------------------------------------------------------------------
According to Mozilla, the image-orientation property will be deprecated. Does anyone know the details about the current status of the property?
"image-orientation - CSS: Cascading Style Sheets | MDN":https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation
> Warning: This property is likely to be deprecated in the near future, with its functionality moved into properties on the <img> and/or <picture> elements, with the possible exception of from-image.
--------------------------------------------------------------------------------
Thank you for review the proposed patch and for providing feedback.
You're right. I was also thinking about this particular warning on the MDN page before proposing this patch.
Quoting from the MDN page, linked above:
> This property is likely to be deprecated in the near future, with its functionality moved into properties on the @<img>@ and/or @<picture>@ elements, with the possible exception of from-image.
The deprecation warning, explicitly excludes @from-image@. This could either mean (a) that they are not planning to deprecate @from-image@, or (b) that they do not expect to create replacements for this particular feature and that it will die eventually.
For (a) we're on the right track, for (b) we're _doomed_ anyway, so we can use it as long as possible.
There's only one viable alternative, i.e. using JS to read the image binary stream, interpret the orientation flag and rotate the image using css transforms or canvas. But this would need a lot more code and be more complex.
Instead the proposed solution will fix the problem for the time being for one third of all desktop users (wild guess at Firefox' market share), with nearly no cost maintenance costs or downsides for other users.
--------------------------------------------------------------------------------
Committed. Thank you for sharing the patch.
--------------------------------------------------------------------------------