autoTransform of image fails when using an opacity mask

Question

when using QML Camera to capture a photo the photo's orientation is set down to which camera is used, images will be like below

THIS IS NORMAL = what the image should look like to the end user the rest is self explanatory.

To view the images in qml with the correct rotation/orientation inside a Custom QML Gallery you simply set autoTransform to true.

GridView {
    id: images
    width: parent.width
    height: images.contentHeight

    FolderListModel {
        id: folderModel
        folder: "file:///sdcard/DCIM/"
        showDirs: false
        nameFilters: ["*.jpeg", "*.jpg", "*.png"]
    }

    Component {
        id: fileDelegate
        Row {
            Image {
                id: name
                width: 100
                height: 100
                source: fileURL
                sourceSize.width: 512
                sourceSize.height: 512
                autoTransform: true
                MouseArea {
                }
            }
        }
    }
    model: folderModel
    delegate: fileDelegate
    clip: true
}

With this example no matter which camera was used or if the image is portrait or landscape autoTransform with show the image as the image above "This is normal".

The problem comes from selecting an image and setting it to another qml Image that is circular and not the images default square.

If i use

Image {
    id: userAvatar
    width: 150
    height: 150
    source: "image source set by an onClicked signal"
    autoTransform: true
}

This will set the image with the correct rotation/orientation but the image isn't circular. For that we need to use an opacity mask

Rectangle {
    id: baseRectAvatar
    width: 100
    height: width
    color: "transparent"
    Layout.alignment: Qt.AlignHCenter
    Image {
        id: userAvatar
        source: "../../assets/profImg.png"
        width: 100
        height: 100
        fillMode: Image.PreserveAspectCrop
        autoTransform: true
        layer.enabled: true
        layer.effect: OpacityMask {
        maskSource: Item {
            width: userAvatar.width
            height: userAvatar.height
            // Rectangle {
            //     anchors.centerIn: parent
            //     width: userAvatar.adapt ? userAvatar.width : Math.min(userAvatar.width, userAvatar.height)
            //     height: userAvatar.adapt ? userAvatar.height : width
            //     radius: Math.min(width, height)
            // }

            Image {
                anchors.fill: parent
                source: "../../assets/profImg.png"
                autoTransform: true
            }
        }
    }
}

Above i have a tried using both rectangle and qml image to try to rotate the image to the correct orientation with no avail. The profImg is just a transparent background with grey circle and a silhouette of a person.

No matter what i do when the image is set to the userAvatar autoTransform no longer works and the image gets displayed as the example images above. Either FRONT CAM or REAR CAM depending which camera was used to save the image.

I can set a rotation value

Image {
    id: userAvatar
    width: 150
    height: 150
    source: "myImage.png"
    rotation: 90 
}

but this is only good for one camera with the other camera image then being upside down. If the image has the opacity mask the rotation has to be set to the opacitymask itself directly and not on the image.

So finally my question How on earth do you get a rounded image in qml that will also adhere to the autoTransform displaying the image in the correct orientation. ie "THIS IS NORMAL" from the images.

Answer 1

You don't have to add the image in the mask itself. It will be applied to its source. So, you can simplify your code and use a rectangle as opacity mask:

Item {
    anchors.fill: parent
    Row {
        Image {
            id: img
            source: "file:///cap1.jpg"
            width: 100
            height: 100
            fillMode: Image.PreserveAspectCrop
            layer.enabled: true
            //autoTransform: true
            layer.effect: OpacityMask {
                maskSource: mask
            }
        }
        Image {
            id: img2
            source: "file:///cap1.jpg"
            width: 100
            height: 100
            fillMode: Image.PreserveAspectCrop
            layer.enabled: true
            autoTransform: true
            layer.effect: OpacityMask {
                maskSource: mask
            }
        }
    }

    Rectangle {
        id: mask
        width: 100
        height: 100
        radius: 50
        visible: false
   }
}

The image will be rounded and, for the scond one, the orientation will be respected: