Canvas.loadImage does not apply meta data transforms (portrait, landscape orientation)

Bug Reports
,
#1

REPRODUCIBILITY: 100%
OS VERSION: 3.4 - 4.4.0.64
HARDWARE: Vollaphone (GS290), Xperia 10ii
UI LANGUAGE: en
REGRESSION: not certain

DESCRIPTION:

When using a declarative Canvas item, using loadImage and drawImage will draw Portrait images rotated -90

This means that the QML Item cannot be used without creating a custom ImageProvider since Canvas provides no means to getting the orientation or setting it from Meta.

An example:

harbour-stopmotion app.

PRECONDITIONS:

STEPS TO REPRODUCE:

  1. Create a Canvas {} item
  2. Component.onCompleted: { loadImage(“url”) }
  3. ctx = drawingCanvas.getContext(‘2d’) ; ctx.drawImage( imageSource, 0, 0);

EXPECTED RESULT:

Default behavior should be to use the image meta data.

ACTUAL RESULT:

Portrait photo images rotated incorrectly.

MODIFICATIONS:

ADDITIONAL INFORMATION:

Currently mitigating by creating custom ImageProvider class:

        QImageReader ir(filename);
        ir.setAutoTransform(true);

It’s sufficient to use a image reader ans setAutoTransform to true. Works from 3.4 → 4.4

See also:

#2

Thanks for reporting this @poetaster. I’ve created an internal report about it and marked it as “tracked”.

In your code, when you re-load the image, does it make any difference if you set autoTransform to true there again? In other words: set it on each image load?

#3

There is no autoTransform property in canvas (for obvious reasons). And Image can’t be used to animations (above a certain rate, about 10 fps) which is why I’m using Canvas. There are no methods in context2d to apply meta data based transformations. They are there in Image.

#4

On request from @flypig a small demonstration app:

Page one, an image which contains rotation meta data which is not used.
Page two, a ‘normal’ image in Portrait mode (exported and saved from videoworks) without meta data.

2 Likes
#5

Thank you for that @poetaster, that will make things a lot easier to understand.

#6

I also tried using an Image object as a ‘loader’. So, set the autoTransform: true on the imge and tell the canvas to draw ‘imageItemId’. No go. It does draw the correct source, but not orientation.