Не удается автоматически преобразовать изображение при использовании маски непрозрачности

Question

при использовании камеры QML для захвата фотографии ориентация фотографии устанавливается в зависимости от того, какая камера используется, изображения будут выглядеть примерно так:

ЭТО НОРМАЛЬНО = как изображение должно выглядеть для конечного пользователя, остальное не требует пояснений.

Чтобы просмотреть изображения в формате qml с правильным вращением / ориентацией в пользовательской галерее QML, просто установите для параметра autoTransform значение 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
}

В этом примере независимо от того, какая камера использовалась, или если изображение с автопреобразованием в портретной или альбомной ориентации показывает изображение, как на изображении выше «Это нормально».

Проблема возникает из-за выбора изображения и установки его в другое изображение qml, которое является круглым, а не квадратом изображений по умолчанию.

Если я использую

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

Это установит изображение с правильным поворотом / ориентацией, но изображение не будет круглым. Для этого нам нужно использовать маску непрозрачности

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
            }
        }
    }
}

Выше я попробовал использовать и прямоугольник, и изображение в формате qml, чтобы безуспешно повернуть изображение в правильную ориентацию. ProfImg - это просто прозрачный фон с серым кругом и силуэтом человека.

Независимо от того, что я делаю, когда для изображения задано значение userAvatar, autoTransform больше не работает, и изображение отображается в качестве примера изображения выше. Либо FRONT CAM, либо REAR CAM, в зависимости от того, какая камера использовалась для сохранения изображения.

Я могу установить значение вращения

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

, но это хорошо только для одной камеры, когда изображение с другой камеры переворачивается вверх ногами. Если изображение имеет маску непрозрачности, поворот должен быть установлен непосредственно на маску непрозрачности, а не на изображение.

Итак, наконец, мой вопрос Как же вы получите округленное изображение в формате qml, которое также будет придерживаться функции автоматического преобразования, отображая изображение в правильной ориентации. то есть "ЭТО НОРМАЛЬНО" из изображений.

Answer 1

Вам не нужно добавлять изображение в саму маску.Это будет применено к его источнику.Таким образом, вы можете упростить свой код и использовать прямоугольник в качестве маски непрозрачности:

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
   }
}

Изображение будет округлено, а для scond-1 будет соблюдена ориентация: