I am trying to write a mobile application in QML. I take a photo and convert it to Base64 and send it to the Database. The problem is that there is no problem in the first photo, but the preview of the first picture comes in the second and subsequent photos.
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtMultimedia
import QtQuick.Window
Page {
id: cameraPage
property string imageID
property string sevkNO
property bool captured: false
property string imgBase64
property string logins
VideoOutput {
id: videoOutput
anchors.fill: parent
fillMode: videoOutput.Stretch
visible: !captured
}
CaptureSession {
imageCapture : ImageCapture {
id: imageCapture
onImageCaptured: {
camera.active = false
canvas.requestPaint()
}
}
camera: Camera {
id: camera
active: true
}
videoOutput: videoOutput
}
Image {
id: previewImg
anchors.fill: parent
source: imageCapture.preview
visible: captured
z: 0
Canvas {
id: canvas
anchors.fill: parent
visible: false
onPaint: {
var ctx = getContext("2d");
ctx.scale(1/Screen.devicePixelRatio,1/Screen.devicePixelRatio);
ctx.drawImage(previewImg,0, 0);
ctx.scale(Screen.devicePixelRatio,Screen.devicePixelRatio);
canvas.requestPaint();
var dataUrl = canvas.toDataURL();
imgBase64 = dataUrl
}
}
}
Image {
id: uploadImg
width: 50
height: 50
fillMode: Image.PreserveAspectFit
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 50
source: "qrc:/qt/qml/mobile-app/src/assets/images/upload.png"
visible: captured
MouseArea {
anchors.fill: parent
Timer {
id: timer
}
function delay(delayTime,cb) {
timer.interval = delayTime;
timer.repeat = false;
timer.triggered.connect(cb);
timer.start();
}
onClicked: {
if(updateApp.updateImage(imageID, imgBase64)) {
upload_lbl.text = "Image Uploading"
imgBase64=""
uploadImg.visible = false
backBtn.visible = false
upload_lbl.visible = true
delay(5000, function() {
imageModel.clear()
stackView.push("qrc:/qt/qml/mobile-app/src/qml/PreviewPage.qml", {logins: logins, sevkNO: sevkNO})
})
} else {
upload_lbl.text = "Upload Problem"
}
}
}
}
Label {
id: upload_lbl
text: " "
anchors.centerIn: parent
visible: false
font {
pointSize: 24
bold: true
}
wrapMode: Text.WordWrap
padding: 15
background: Rectangle{
radius: 20
color: "lightgreen"
width: parent.width
height: parent.height
}
}
Image {
id: backBtn
width: 30
height: 30
fillMode: Image.PreserveAspectFit
source: "qrc:/qt/qml/mobile-app/src/assets/images/back.png"
anchors.left: parent.left
anchors.leftMargin: 20
anchors.top: parent.top
anchors.topMargin: 25
MouseArea {
anchors.fill: parent
onClicked: {
imageModel.clear()
stackView.push("qrc:/qt/qml/mobile-app/src/qml/PreviewPage.qml", {logins: logins, sevkNO: sevkNO})
}
}
}
Image {
id: captureBtn
width: 50
height: 50
fillMode: Image.PreserveAspectFit
source: "qrc:/qt/qml/mobile-app/src/assets/images/camera.png"
visible: !captured
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 50
MouseArea {
anchors.fill: parent
onClicked: {
imageCapture.capture()
captured = true
}
}
}
}