如何使用Ubuntu手机平台中的照相机API来存储照片

在前面的一篇文章中“如何在Ubuntu手机中使用前置照相机”，我们可以使用相应的C++代码来控制前后位置的照相机来拍照，但是我们又如何能够把所拍到的照片存储到相应的文件中呢？我们可以使用Qt 5.4版本中的Item所提供的一个新的功能“grabToImage”。这样我们可以很方便地把我们得到的照片存到我们相应的目录中。

在Ubuntu手机平台中，由于安全的原因，我们的应用只可以访问自己所在的可以访问的目录。在这个例程中，我们使用了一些环境的变量来得到我们所需要的存储的目录的位置：

我们整个的代码如下：

import QtQuick 2.0
import Ubuntu.Components 1.1
import QtMultimedia 5.0
import 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;
}
}
}
}

}
}

整个的设计非常简单。在主界面中我们可以在相机的影像的任何地方进行触屏来拍下我们的照片。我们可以使用“Show the taken picture”按钮来进入下一个页面来显示存储的图片。为了方便设计，我们选择了一个固定的文件名。当然，开发者们可以自己来选择自己的所需要的文件名。





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