Qt for Android中拍照预览的bug及解决

在使用使用QtQuick进行移动端开发时，时常会用到相机这一个功能，而原生android中如果拍照的话，如果不想复杂或者特殊需求，就直接使用Intent去调用系统的相机进行拍照，然后 在当前activity中的拿到拍完后的照片的地址进行编辑，在使用QML做移动端开发时，如果想使用相机拍照预览，也有几种实现方式，

1. 使用c++操控相机，

2. 直接使用QtQuick中提供的相机元素控件Camera ，

3. 间接调用android或者ios的相机进行拍照，但是这个需要相应的应用权限

我这里使用了QtQuick提供QtMultimedia这个模块下的Camera的功能进行拍照预览的实现，拍照前我们需要判断当前设备是否支持拍照的功能进行应用的提升功能，我们可以根据QtMultimedia.availableCameras.length>0是否为真来判断当前设备是否可用，我这里只是个人的用法，在拍照前，先声明两个变量来进行布局的控制

//判断当前设备是否可以拍照

property bool isCameraAvailable: QtMultimedia.availableCameras.length > 0

//判断是否拍照完成

property bool imageIsShow: false

拍照我们需要一个相机的元素控件和一个拍照后预览的容器Image元素和一个拍照显示的容器VideoOutput控件

Camera {
id: camera
captureMode: Camera.CaptureStillImage
imageCapture {
id: _capture
onImageCaptured: {
photoPreview.source = preview
imageIsShow = true
}
}
imageProcessing.whiteBalanceMode:          CameraImageProcessing.WhiteBalanceFlash
imageProcessing.colorFilter: CameraImageProcessing.ColorFilterNone
exposure.exposureMode: Camera.ExposureAuto
flash.mode: Camera.FlashRedEyeReduction
focus.focusMode: Camera.FocusAuto
focus.focusPointMode: Camera.FocusPointCenter
position: Camera.BackFace
}
VideoOutput {
id: videoout; anchors.fill: parent
source: camera; visible: true
autoOrientation: true
}
Image {
id: photoPreview; anchors.fill: parent
visible: status == Image.Ready
fillMode: Image.PreserveAspectFit
}

“

上边这些设置在Qt的帮助文档中都有对应的解释就不累赘了，拍照还需要有几个按钮控件来进行控制拍照或者预览的作用

Column{
anchors.right: parent.right
anchors.rightMargin: 20
anchors.verticalCenter: parent.verticalCenter
spacing: 20
visible: isCameraAvailable
Rectangle{
width: 80; height: 80; radius: width/2
color: “black”
visible: imageIsShow
Text{
text: "丢弃"
anchors.fill: parent
horizontalAlignment:Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter
font.pixelSize: height * 0.3
color: "white"
}
MouseArea{
anchors.fill: parent
onClicked: {
imageIsShow = false
photoPreview.source = ''
}
}
}
Rectangle{
width: 80; height: 80; radius: width/2
color: “black”
visible: !imageIsShow
Text{
text: "拍照"
anchors.fill: parent
horizontalAlignment:Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter
font.pixelSize: height * 0.3
color: "white"
}
MouseArea{
anchors.fill: parent
onClicked: {
camera.imageCapture.capture();
}
}
}
Rectangle{
width: 80; height: 80; radius: width/2
color: “black”
visible: imageIsShow
Text{
text: "使用"
anchors.fill: parent
horizontalAlignment:Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter
font.pixelSize: height * 0.3
color: "white"
}
MouseArea{
anchors.fill: parent
onClicked: {
在使用照片，并退出界面
}
}
}
}
Text{
anchors.centerIn: parent
text: "设备不可用"; color: "whitesmoke"
font.pixelSize: dp(24)
visible: !isCameraAvailable
}
}

这就是一个拍照的完整功能，但是在使用过程中却发现一个问题，拍照预览时，如果快速的拍照使用，会出现预览的照片总是预览的是上一次拍的照片，这个问题纠结了很久，于是就去查了下帮助文档，发现imageCapture下还有另外一个方法 onImageSaved，于是就尝试了一下，把照片的预览的事件写到了onImageSaved方法里面，发现问题尽然解决了，代码如下，其他不变

imageCapture {
id: _capture
onImageSaved: {
photoPreview.source="file:///"+path
imageIsShow=true;
}
}

但是在有的配置低的设备上这个过程比较慢，可能是拍照完成后去读取本地照片速度有的慢的问题，在使用过程中发现有时候发现拍完照片后，旋转终端设备会出现前面是预览照片，后面是当前画面的情况解决方法是在VideoOutput 中添加visible: !imageIsShow 即可解决。如果问题欢迎留言。