如何在QML中使用camera API来拍照

在先前的例程中“如何使用Ubuntu手机平台中的照相机API来存储照片”，我们已经展示了如何使用Item的属性来存储我们的照片。在这篇文章中，我们将使用Camera API来完成同样的功能。

我们来直接贴自己的代码：

main.qml

import QtQuick 2.0
import Ubuntu.Components 1.1
import QtMultimedia 5.0

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "cameraapp.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(60)
    height: units.gu(85)

    property var resolution

    // This function is used to get the writable private directory of this app
    function getPriateDirectory() {
        var sharepath = "/home/phablet/.local/share/";
        var path = sharepath + applicationName;
        console.log("path: " + path);
        return path;
    }

    Page {
        id: page
        title: i18n.tr("cameraapp")

        Camera {
            id: camera

            imageProcessing.whiteBalanceMode: CameraImageProcessing.WhiteBalanceFlash

            exposure {
                exposureCompensation: -1.0
                exposureMode: Camera.ExposurePortrait
            }

            flash.mode: Camera.FlashRedEyeReduction

            imageCapture {
                onImageCaptured: {
                    console.log("image captured! reqId: " + requestId)
                    image.source = preview  // Show the preview in an Image
                }

                onImageSaved: {
                    console.log("image has been saved: " + requestId);
                    console.log("saved path: " + path);
                    image.source = path;
                }
            }

            Component.onCompleted: {
                resolution = camera.viewfinder.resolution;
                console.log("resolution: " + resolution.width + " " + resolution.height);
            }
        }

        Row {
            id: container
            VideoOutput {
                id: video
                source: camera
                width: page.width
                height: page.height
                focus : visible // to receive focus and capture key events when visible
                orientation: -90

                //                Image {
                //                    id: photoPreview
                //                    anchors.fill: parent
                //                    rotation: -90
                //                }

                SwipeArea {
                    anchors.fill: parent
                    onSwipe: {
                        console.log("swipe happened!： " + direction)
                        switch (direction) {
                        case "left":
                            page.state = "image";
                            break
                        }
                    }
                }
            }

            Item {
                id: view
                width: page.width
                height: page.height

                Image {
//                    anchors.fill: parent
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    width: parent.height
                    height: parent.width
                    id: image
                    rotation: 90
                    fillMode: Image.PreserveAspectFit
                }

                Text {
                    text: image.source
                    color:"red"
                    font.pixelSize: units.gu(2.5)
                    width: page.width
                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                }

                SwipeArea {
                    anchors.fill: parent
                    onSwipe: {
                        console.log("swipe happened!： " + direction)
                        switch (direction) {
                        case "right":
                            page.state = "";
                            break
                        }
                    }
                }
            }
        }

        states: [
            State {
                name: "image"
                PropertyChanges {
                    target: container
                    x:-page.width
                }
                PropertyChanges {
                    target: capture
                    opacity:0
                }
            }
        ]

        transitions: [
            Transition {
                NumberAnimation { target: container; property: "x"; duration: 500
                    easing.type:Easing.OutSine}
                //                NumberAnimation { target: inputcontainer; property: "opacity"; duration: 200}
                NumberAnimation { target: capture; property: "opacity"; duration: 200}
            }
        ]

        Button {
            id: capture
            anchors.bottom: parent.bottom
            anchors.bottomMargin: units.gu(1)
            anchors.horizontalCenter: parent.horizontalCenter
            text: "Capture"

            onClicked: {
                console.log("capture path: " + getPriateDirectory());
                camera.imageCapture.captureToLocation(getPriateDirectory());
                page.state = "image"
            }
        }
    }
}

在这里我们必须指出的是我们可以使用:

camera.imageCapture.captureToLocation(getPriateDirectory());

来把照片存储到我们指定的位置。这个位置可以是手机应用自己的私有的目录或它下面的子目录。

我们可以在如下的代码中得到照相机存储的文件信息：

           imageCapture {
                onImageCaptured: {
                    console.log("image captured! reqId: " + requestId)
                    image.source = preview  // Show the preview in an Image
                }

                onImageSaved: {
                    console.log("image has been saved: " + requestId);
                    console.log("saved path: " + path);
                    image.source = path;
                }
            }

通过得到的path信息，我们可以得到照片的位置，并显示它。

在我们的设计中，我们可以使用swipe向左或向右来切换viewFinder及拍照的相片。

运行我们的应用，我们可以看到如下的图片：

  

整个项目的源码在： https://github.com/liu-xiao-guo/cameraapp