QML移动端相机应用后续拍照重复显示首张预览图问题求助

问题根源 #

1. 页面状态未重置：再次进入CameraPage时，captured属性仍保持为true，导致相机无法重新激活，预览图停留在首次拍摄的内容。
2. 相机未重新激活：首次拍摄后camera.active被设为false，后续未主动恢复相机状态。
3. Image组件缓存：previewImg默认缓存imageCapture.preview的URL内容，即使预览更新也不会自动刷新。
4. Canvas绘制逻辑问题：onPaint中递归调用requestPaint()造成无效循环，且未等待预览图加载完成就生成Base64。

修复步骤 #

1. 重置页面初始状态 #

在页面激活时重置拍摄相关状态，确保每次进入页面都回到初始拍摄模式：

Page {
    id: cameraPage
    // 原有属性保留
    onActivated: {
        captured = false
        imgBase64 = ""
        camera.active = true
        previewImg.source = "" // 清空旧预览，强制刷新
    }
}

2. 修正ImageCapture回调逻辑 #

移除不必要的相机关闭操作，等待预览图加载完成后再触发Canvas绘制：

ImageCapture {
    id: imageCapture

    onImageCaptured: {
        captured = true
        previewImg.source = preview
        // 预览图加载完成后再绘制Canvas，避免获取空内容
        previewImg.onLoaded.connect(() => {
            canvas.requestPaint()
            previewImg.onLoaded.disconnect() // 防止重复触发
        })
    }
}

3. 禁用Image组件缓存 #

强制previewImg不缓存旧内容，确保每次加载新的拍摄预览：

Image {
    id: previewImg
    anchors.fill: parent
    source: ""
    visible: captured
    z: 0
    cache: false // 禁用缓存，强制加载新预览
}

4. 修复Canvas绘制逻辑 #

移除递归的requestPaint()调用，避免无限循环：

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);
        var dataUrl = canvas.toDataURL();
        imgBase64 = dataUrl
    }
}

5. 绑定相机激活状态 #

将相机激活状态与captured属性绑定，自动控制相机开关：

Camera {
    id: camera
    active: !captured
}

可选：添加重新拍摄功能 #

如果需要在同一页面内拍摄多张照片，新增重新拍摄按钮：

Image {
    id: retakeBtn
    width: 50
    height: 50
    fillMode: Image.PreserveAspectFit
    source: "qrc:/qt/qml/mobile-app/src/assets/images/retake.png"
    visible: captured

    anchors.left: parent.left
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 50
    anchors.leftMargin: 50

    MouseArea {
        anchors.fill: parent
        onClicked: {
            captured = false
            imgBase64 = ""
        }
    }
}

核心修正后代码片段 #

Page {
    id: cameraPage

    property string imageID
    property string sevkNO
    property bool captured: false
    property string imgBase64
    property string logins

    onActivated: {
        captured = false
        imgBase64 = ""
        camera.active = true
        previewImg.source = ""
    }

    VideoOutput {
        id: videoOutput
        anchors.fill: parent
        fillMode: videoOutput.Stretch
        visible: !captured
    }

    CaptureSession {
        imageCapture : ImageCapture {
            id: imageCapture

            onImageCaptured: {
                captured = true
                previewImg.source = preview
                previewImg.onLoaded.connect(() => {
                    canvas.requestPaint()
                    previewImg.onLoaded.disconnect()
                })
            }
        }

        camera: Camera {
            id: camera
            active: !captured
        }
        videoOutput: videoOutput
    }

    Image {
        id: previewImg
        anchors.fill: parent
        source: ""
        visible: captured
        z: 0
        cache: false

        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);
                var dataUrl = canvas.toDataURL();
                imgBase64 = dataUrl
            }
        }
    }

    // 其余按钮组件保持不变
}

内容的提问来源于stack exchange，提问作者Volkan Dayanc