How to use the camera API on the Ubuntu Mobile Phone platform to store photos,
In the previous article "how to use a front camera in a Ubuntu mobile phone", we can use the corresponding C ++ code to control the camera at the front and back to take a photo, but how can we store the photos in the corresponding files? We can use a new function "grabToImage" provided by Item in Qt 5.4 ". In this way, we can easily store the photos in our corresponding directory.
On the Ubuntu mobile platform, for security reasons, our applications can only access their own accessible directories. In this routine, we use some environment variables to get the location of the directory we need to store:
The Code is as follows:
import QtQuick 2.0import Ubuntu.Components 1.1import QtMultimedia 5.0import readenv 1.0/*! \brief MainView with a Label and Button elements.*/MainView { id: root // objectName for functional testing purposes (autopilot-qt5) objectName: "mainView" // Note! applicationName needs to match the "name" field of the click manifest applicationName: "camerashot.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(100) height: units.gu(75) Page { id: mainPage title: i18n.tr("camerashot") property string path: "" ReadEnv { id: env } Item { id: page1 anchors.fill: parent Camera { id: camera imageProcessing.whiteBalanceMode: CameraImageProcessing.WhiteBalanceFlash exposure { exposureCompensation: -1.0 exposureMode: Camera.ExposurePortrait } flash.mode: Camera.FlashRedEyeReduction imageCapture { onImageCaptured: { photoPreview.source = preview // Show the preview in an Image } } } VideoOutput { id: video source: camera anchors.fill: parent focus : visible // to receive focus and capture key events when visible orientation: -90 MouseArea { anchors.fill: parent onClicked: { var APP_ID = env.getenv("APP_ID"); var app_pkgname = APP_ID.split('_')[0] mainPage.path = env.getenv("XDG_DATA_HOME") + "/" + app_pkgname + "/pic.png"; console.log("share path: " + mainPage.path); var a = video.grabToImage(function(result) { result.saveToFile(mainPage.path); }, Qt.size(photoPreview.width, photoPreview.height) ); console.log("return result: " + a); } } Image { id: photoPreview } } Button { id: button anchors.bottom: parent.bottom anchors.right: parent.right text: "Show the taken picture" onClicked: { pic.visible = true; page1.visible = false; console.log("image path: " + mainPage.path); image.source = ""; image.source = "file:///" + mainPage.path; } } } Item { id: pic anchors.fill: parent visible: false Image { id: image cache: false anchors.fill: parent } Label { text: mainPage.path } Image { anchors.bottom: parent.bottom anchors.left: parent.left anchors.leftMargin: units.gu(1) anchors.bottomMargin: units.gu(1) width: units.gu(3) height: units.gu(3) source: "images/icon-left-arrow.png" MouseArea { anchors.fill: parent onClicked: { pic.visible = false page1.visible = true; } } } } }}
The entire design is very simple. In the main interface, we can touch the screen anywhere in the camera image to take our photos. You can use the Show the taken picture button to go to the next page to display the stored images. To facilitate the design, we chose a fixed file name. Of course, developers can select their own desired file names.
Source code for the entire project in: git clone https://gitcafe.com/ubuntu/camerashot.git