Question

使用QML相机捕获照片时，将照片的方向设置为使用相机的方向，图像如下所示

这是正常的=最终用户应该看到的图像是什么样子，其余的不言而喻。

要在Custom QML Gallery中以正确的旋转/方向查看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图像尝试将图像旋转到正确的方向而无济于事。配置文件只是带有灰色圆圈和一个人的轮廓的透明背景。

无论我将图像设置为user时我怎么做，头像自动转换不再起作用，并且图像显示为上述示例图像。 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
   }
}

图像将被四舍五入，对于第二个图像，将遵循方向：

使用不透明蒙版时，图像的自动转换失败

1 个答案: