The first photo preview taken in QML comes in all images taken after

49 Views Asked by At

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

There are 0 best solutions below