0

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
            }
        }
    }
}
Christoph Rackwitz
  • 11,317
  • 4
  • 27
  • 36
  • Instead of Camera.imageCapture, have you considerd using Item.grabToImage() to take a screenshot of the file. In the ItemGrabResult, you can access an in-memory version of the image and, perhaps, call Qt.btoa() on it to get into base64? – Stephen Quan Jun 19 '23 at 06:21
  • Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – Community Jun 20 '23 at 01:32

0 Answers0