How to use the camera API to take photos in QML

In the previous routines, "How to use the camera API in the Ubuntu mobile platform to store photos", we have shown how to use the properties of item to store our photos. In this article, we will use the camera API to accomplish the same functionality.

Let's just stick to our code:

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"/* The 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 (HEIGHT:UNITS.GU) 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:Camer Aimageprocessing.whitebalanceflash Exposure {exposurecompensation: -1.0 exposure                Mode: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//RO                    Tation: -90//} swipearea {Anchors.fill:parent Onswipe: {console.log ("swipe happened!:" + direction) switch (d                            irection) {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.verticalCent                    ER 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} Sw Ipearea {anchors.fill:parent onswipe: {console.log ("swipe                            happened!: "+ direction) switch (direction) {case ' right ': Page.state = ""; Break}}}} states: [Sta                    TE {name: "image" Propertychanges {Target:container X:-page.width} propertychanges {target:capture OPA            city:0} }] Transitions: [Transition {numberanimation {Target:container; property: ' X ' ; duration:500 Easing.type:Easing.OutSine}//Numberanimation {Target:in Putcontainer; 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:" + ge                Tpriatedirectory ());                Camera.imageCapture.captureToLocation (Getpriatedirectory ()); Page.state = "Image"}}}

What we have to point out here is that we can use:
Camera.imageCapture.captureToLocation (Getpriatedirectory ());
To store the photos in our designated location. This location can be the phone app's own private directory or subdirectories underneath it.
We can get the file information stored by the camera in the following code:

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

By getting the path information, we can get the location of the photo and show it.
In our design, we can use swipe to switch viewfinder and photos to the left or right.
To run our application, we can see the following images:


The source code for the entire project is: Git clone https://gitcafe.com/ubuntu/cameraapp.git

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

How to use the camera API to take photos in QML