如何使用QML相机捕捉用户定义尺寸的图像

Question

如何通过按下按钮 Scan! 在 QML 中捕获宽度和高度相等的图像，即方形图像。这是我的代码

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtMultimedia 5.0

Window {
    visible: true
    id: root
    width: 460; height: 640
    color: "#dff79e"
    property int duration: 3000

    Rectangle {
        width: 400
        height: 400
        x: 30; y: 90

        Camera {
            id: camera

            imageCapture {
                onImageCaptured: {
                    // Show the preview in an Image
                    photoPreview.source = preview
                }
            }
        }

        VideoOutput {
            source: camera
            focus : visible // to receive focus and capture key events when visible
            anchors.fill: parent

            MouseArea {
                anchors.fill: parent;
                onClicked: camera.imageCapture.capture();
            }
        }

        Image {
            id: photoPreview
        }
    }


    Rectangle {
        id: scanButton
        x: 130; y: 520
        width: 200; height: 70
        color: "#4b86b4"
        radius: 3

        Text {
            anchors.centerIn: parent
            font.pixelSize: 20
            color: "white"
            text: qsTr("Scan!")
        }

    }

    Rectangle {
        id: menu_screen
        width: parent.width; height: parent.height
        color: "#303030"
        radius: 3

        x: -460;

        Behavior on x { NumberAnimation { easing.type: Easing.OutQuad; duration: 500 } }

        Rectangle {
            id: listviewRectangle
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.margins: 20

            width: 260; height: 525
            color: "#444444"
            radius: 3

            ListView {
                anchors.fill: parent
                anchors.margins: 20

                clip: true

                model: 30

                delegate: numberDelegate
                spacing: 7
            }

            Component {
                id: numberDelegate
                Rectangle {
                    width: 220; height: 50
                    color: "#ccec75"
                    radius: 3

                    Text {
                        anchors.centerIn: parent
                        font.pixelSize: 10
                        text: index
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked:
                            ColorAnimation {
                            from: "white"
                            to: "lightgreen"
                            duration: 100
                        }

                    }
                }
            }
        }

        Rectangle {
            id: clearHistory
            anchors.top: listviewRectangle.bottom
            anchors.right: parent.right
            anchors.horizontalCenter: listviewRectangle.horizontalCenter
            anchors.margins: 20

            color: "#ffeead"
            width: listviewRectangle.width; height: 60
            scale: 0.9
            radius: 3

            Text {
                anchors.centerIn: parent
                font.pixelSize: 20
                text: qsTr("Clear History")
                color: "#303030"
            }
        }
    }

    Rectangle {
        id: click_button
        width: 50; height: 50
        color: "#303030"
        scale: m_area.pressed ? 1.1 : 1
        radius: 3

        x: -1; y: 5;

        Text {
            id: cbtext
            anchors.centerIn: parent
            font.pixelSize: 20
            color: "lightgray"
            text: ">>"
        }

        Behavior on x { NumberAnimation { easing.type: Easing.OutQuad; duration: 500 } }
    }

    MouseArea {
        id: m_area
        anchors.fill: click_button
        onClicked : {
            click_button.x = click_button.x == -1 ? 299 : -1
            menu_screen.x = menu_screen.x == -460 ? -160 : -460
            cbtext.text = (x==299) ? ">>":"<<"
        }
    }
}

Answer 1

imageCapture 有一个属性称为分辨率。用它来设置分辨率。要在按下 Scan 时拍照，请将鼠标区域移动到 scan 按钮下方。也许这会有所帮助。

import QtQuick 2.4
import QtQuick.Window 2.2
import QtMultimedia 5.0

Window {
    visible: true
    id: root
    width: 460; height: 640
    color: "#dff79e"
    property int duration: 3000
    property int sideLength: 400

    Rectangle {
        width: 400
        height: 400
        x: 30; y: 90

        Camera {
            id: camera

            imageCapture {

                resolution: Qt.size(sideLength, sideLength)

                onImageCaptured: {
                    // Show the preview in an Image
                    photoPreview.source = preview
                }
            }
        }

        VideoOutput {
            source: camera
            focus : visible // to receive focus and capture key events when visible
            anchors.fill: parent


        }

        Image {
            id: photoPreview
        }
    }


    Rectangle {
        id: scanButton
        x: 130; y: 520
        width: 200; height: 70
        color: "#4b86b4"
        radius: 3

        Text {
            anchors.centerIn: parent
            font.pixelSize: 20
            color: "white"
            text: qsTr("Scan!")
        }

        MouseArea {
            anchors.fill: parent;
            onClicked: camera.imageCapture.capture();
        }

    }

    Rectangle {
        id: menu_screen
        width: parent.width; height: parent.height
        color: "#303030"
        radius: 3

        x: -460;

        Behavior on x { NumberAnimation { easing.type: Easing.OutQuad; duration: 500 } }

        Rectangle {
            id: listviewRectangle
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.margins: 20

            width: 260; height: 525
            color: "#444444"
            radius: 3

            ListView {
                anchors.fill: parent
                anchors.margins: 20

                clip: true

                model: 30

                delegate: numberDelegate
                spacing: 7
            }

            Component {
                id: numberDelegate
                Rectangle {
                    width: 220; height: 50
                    color: "#ccec75"
                    radius: 3

                    Text {
                        anchors.centerIn: parent
                        font.pixelSize: 10
                        text: index
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked:
                            ColorAnimation {
                            from: "white"
                            to: "lightgreen"
                            duration: 100
                        }

                    }
                }
            }
        }

        Rectangle {
            id: clearHistory
            anchors.top: listviewRectangle.bottom
            anchors.right: parent.right
            anchors.horizontalCenter: listviewRectangle.horizontalCenter
            anchors.margins: 20

            color: "#ffeead"
            width: listviewRectangle.width; height: 60
            scale: 0.9
            radius: 3

            Text {
                anchors.centerIn: parent
                font.pixelSize: 20
                text: qsTr("Clear History")
                color: "#303030"
            }
        }
    }

    Rectangle {
        id: click_button
        width: 50; height: 50
        color: "#303030"
        scale: m_area.pressed ? 1.1 : 1
        radius: 3

        x: -1; y: 5;

        Text {
            id: cbtext
            anchors.centerIn: parent
            font.pixelSize: 20
            color: "lightgray"
            text: ">>"
        }

        Behavior on x { NumberAnimation { easing.type: Easing.OutQuad; duration: 500 } }
    }

    MouseArea {
        id: m_area
        anchors.fill: click_button
        onClicked : {
            click_button.x = click_button.x == -1 ? 299 : -1
            menu_screen.x = menu_screen.x == -460 ? -160 : -460
            cbtext.text = (x==299) ? ">>":"<<"
        }
    }
}

如何使用QML相机捕捉用户定义尺寸的图像

How to use QML camera to capture image with user-defined dimension

javascript

qt

camera

qml