如何在QML中使用camera API來拍照，qmlcamera

如何在QML中使用camera API來拍照，qmlcamera

在先前的常式中“如何使用Ubuntu手機平台中的照相機API來儲存照片”，我們已經展示了如何使用Item的屬性來儲存我們的照片。在這篇文章中，我們將使用Camera API來完成同樣的功能。

我們來直接貼自己的代碼：

main.qml

import QtQuick 2.0import Ubuntu.Components 1.1import 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及拍照的相片。
運行我們的應用，我們可以看到如下的圖片：
  

整個項目的源碼在：git clone https://gitcafe.com/ubuntu/cameraapp.git

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。