Image orientation

[Quinten]

Hey,

When an user on mobile takes a portrait image and uploads it it'll add EXIF (meta data) to the image so it is sure that the image is taken in portrait. That way the phone doesn't have to recalculate all the pixels since the sensor cannot rotate. However, when you have an <img src="...">, it does not read the orientation data. CSS has an image-orientation: from-image; tag but chrome doesn't read that.

Any way to let Chrome read EXIF?

[Khushal Sagar]

There is definitely code to read orientation from EXIF for jpegs (here). What's the case where you see an incorrect orientation being used?

--
--
Chromium Developers mailing list: chromi...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-dev
---
You received this message because you are subscribed to the Google Groups "Chromium-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-dev/283eecf4-1f7f-4b3e-a5a7-ebbb7c75f61d%40chromium.org.

[Fredrik Söderquist]

On Tue, Mar 13, 2018 at 11:12 PM, Khushal Sagar <khusha...@chromium.org> wrote:

There is definitely code to read orientation from EXIF for jpegs (here). What's the case where you see an incorrect orientation being used?

On Tue, Mar 13, 2018 at 6:26 AM, Quinten <qpla...@gmail.com> wrote:

Hey,

When an user on mobile takes a portrait image and uploads it it'll add EXIF (meta data) to the image so it is sure that the image is taken in portrait. That way the phone doesn't have to recalculate all the pixels since the sensor cannot rotate. However, when you have an <img src="...">, it does not read the orientation data. CSS has an image-orientation: from-image; tag but chrome doesn't read that.

Any way to let Chrome read EXIF?

The EXIF data will be considered in image documents - i.e when you navigate directly to an image. Support for the 'image-orientation' is implemented (to some spec wording at least - possibly not the latest), but it is not enabled (and not behind the "experimental" flag AFAICS.) See also https://crbug.com/158753.

/fs

--
--
Chromium Developers mailing list: chromi...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-dev
---
You received this message because you are subscribed to the Google Groups "Chromium-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-dev/283eecf4-1f7f-4b3e-a5a7-ebbb7c75f61d%40chromium.org.

--
--
Chromium Developers mailing list: chromi...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-dev
---
You received this message because you are subscribed to the Google Groups "Chromium-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-dev+unsubscribe@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-dev/CAMLuWUwSJufC8Jx-geGF0t1P45g7Ck64GyMU3r8qcjRP3swZ-Q%40mail.gmail.com.

[Noel Gordon]

On Wednesday, March 14, 2018 at 9:34:21 AM UTC+11, Fredrik Söderquist wrote:

On Tue, Mar 13, 2018 at 11:12 PM, Khushal Sagar <khusha...@chromium.org> wrote:

There is definitely code to read orientation from EXIF for jpegs (here). What's the case where you see an incorrect orientation being used?

On Tue, Mar 13, 2018 at 6:26 AM, Quinten <qpla...@gmail.com> wrote:

Hey,

When an user on mobile takes a portrait image and uploads it it'll add EXIF (meta data) to the image so it is sure that the image is taken in portrait. That way the phone doesn't have to recalculate all the pixels since the sensor cannot rotate. However, when you have an <img src="...">, it does not read the orientation data. CSS has an image-orientation: from-image; tag but chrome doesn't read that.

Any way to let Chrome read EXIF?

The EXIF data will be considered in image documents - i.e when you navigate directly to an image. Support for the 'image-orientation' is implemented (to some spec wording at least - possibly not the latest), but it is not enabled (and not behind the "experimental" flag AFAICS.) See also https://crbug.com/158753.

This spec feature is marked at risk.

<body>

  <iframe src="image.jpg"> </iframe>

</body>

creates an ImageDocument in <iframe>.  The approach is unreliable across browser though, so it's only recommended for hobby projects.

~noel 

[Quinten]

Here's a little jsfiddle to explain what I mean.

When you download the image (click it) and view it in Chrome or an image viewer it will show that the image is taken as a portrait. The <img> doesn't read the EXIF correctly and shows it in landscape.

Op dinsdag 13 maart 2018 23:13:01 UTC+1 schreef Khushal Sagar:

[Peter Kasting]

On Wed, Mar 14, 2018 at 8:10 AM, Quinten <qpla...@gmail.com> wrote:

Here's a little jsfiddle to explain what I mean.

When you download the image (click it) and view it in Chrome or an image viewer it will show that the image is taken as a portrait. The <img> doesn't read the EXIF correctly and shows it in landscape.

Right, the request is clear.  See the comments on the bug for details about the CSS property you referred to and its status in general as well as in Chrome.

PK

[Quinten]

For everyone who has the same problem, here's my solution.

When a user uploads an image, test for its exif orientation, rotate the image and store it.

Here's a small php.

<?php

$img = 'your image';

header("Content-type: image/jpeg");

$exif = @exif_read_data($img,0,true);

$orientation = @$exif['IFD0']['Orientation'];

if($orientation == 7 || $orientation == 8) {

$degrees = 90;

} elseif($orientation == 5 || $orientation == 6) {

$degrees = 270;

} elseif($orientation == 3 || $orientation == 4) {

$degrees = 180;

} else {

$degrees = 0;

}

$rotate = imagerotate(imagecreatefromjpeg($img), $degrees, 0);

imagejpeg($rotate);

imagedestroy($rotate);

?>

Note that this doesn't account for mirrored images created by some devices. Also, storing the image in favour of recalculate it each request is recommend.

Hope that this helps anyone.

Cheers

Op dinsdag 13 maart 2018 20:08:39 UTC+1 schreef Quinten: