Respect image orientation in layout(picture), HTML widget, map tips

[Houska1]

QGIS display of photos (via an attribute referencing a file or URL) does not reflect the image's EXIF orientation tag in several places:

1. HTML widget in forms (it is reflected in the QML widget--thank you!)
2. Map tips
3. Picture item in a layout

EXIF orientation is of course a bugbear in HTML, with at best dubious normal browser support, and images intended for web use are best saved pre-rotated. However, given the increasing integration of QGIS with fieldwork, where photos with cameras that use the orientation tag are pretty typical, out-of-the-box support would be helpful.

I'm guessing the places orientation is reflected are where QGIS uses QImageReader with setAutoTransform=true as opposed to an HTML engine rendering an <img> . So I'm hoping fixing #3 above might be easy, while #1 and #2 are likely harder?

(There are, of course, workarounds, but they're a hassle -- for now I'm extracting the Orientation tag as a separate attribute in the layer and then using data-driven rotations and resizing to fit inside the specified rectangle in a layout.)

A prior commit that seems to have fixed this for the attachment widget is 574a654

[nyalldawson]

Yes - fixing the picture item should be relatively straightforward, using the same approach as 574a654. As you've rightly guessed, the HTML based widgets are a lot trickier. Looks like adding custom js to your html to handle this is the only viable approach...

[davidafuller01]

+1

[pellegoeg]

Hi,

I have made a fix for this issue (my first pull request, so hopefully I have done the right job!).

Its adding a extra attribute to the photo table with exif orientation.

The could then be rotated in maptips by using som case when eg:

<img src="file:///[% photo %]" width="350" height="250" style="[% CASE WHEN orientation = 2 THEN 'transform: scaleX(-1);' WHEN orientation = 3 THEN 'transform:rotate(180deg);' WHEN orientation = 4 THEN 'transform:rotate(180deg) scaleX(-1);' WHEN orientation = 5 THEN 'transform:rotate(-90deg) scaleX(-1);' WHEN orientation = 6 THEN 'transform:rotate(90deg);' WHEN orientation = 7 THEN 'transform:rotate(90deg) scaleX(-1);' WHEN orientation = 8 THEN 'transform:rotate(270deg);' ELSE '' END %]" />

[VxTedxV]

Hi,

I have made a fix for this issue (my first pull request, so hopefully I have done the right job!).

Its adding a extra attribute to the photo table with exif orientation.

The could then be rotated in maptips by using som case when eg:

<img src="file:///[% photo %]" width="350" height="250" style="[% CASE WHEN orientation = 2 THEN 'transform: scaleX(-1);' WHEN orientation = 3 THEN 'transform:rotate(180deg);' WHEN orientation = 4 THEN 'transform:rotate(180deg) scaleX(-1);' WHEN orientation = 5 THEN 'transform:rotate(-90deg) scaleX(-1);' WHEN orientation = 6 THEN 'transform:rotate(90deg);' WHEN orientation = 7 THEN 'transform:rotate(90deg) scaleX(-1);' WHEN orientation = 8 THEN 'transform:rotate(270deg);' ELSE '' END %]" />

Beware if this code is in a table because the transform:rotate() will make images overlap borders -> must be contained in a square cell of the table