Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML Image zoom screenshot



  • Hey!

    I have an application where I take a picture. Afterwards I can view it, zoom in on it, view different parts while zoomed in etc.
    The next thing I want to do is that I want to be able to take a screenshot of the zoomed in image. I cant just take a screenshot of the screen because there are other elements on top of the image. So what I need is to have a snippet of my original image.

    This is my QML code:
    @
    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.0
    import QtMultimedia 5.5
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Dialogs 1.2
    import "../components"

    //Snapshot View
    Item {
    id: snapshotViewItem
    visible: true
    width: mainWindow.width
    height: mainWindow.height

    //Flickable item to zoom and view different parts of the image
    Flickable{
        id: flick
    
        anchors.fill: parent
        contentWidth: parent.width
        contentHeight: parent.height
        boundsBehavior: Flickable.StopAtBounds
    
        rebound: Transition {
            NumberAnimation {
                properties: "x,y"
                duration: 0
            }
        }
    
    
    
        //Zoom on pinch
        PinchArea{
            id: pinchArea
            width: Math.max(flick.contentWidth, flick.width)
            height: Math.max(flick.contentHeight, flick.height)
            pinch.minimumScale: 1
            pinch.maximumScale: 10
            pinch.dragAxis: Pinch.XAndYAxis
    
            property real initialWidth
            property real initialHeight
    
            onPinchStarted: {
                initialWidth = initialWidth < flick.width ? flick.width : flick.contentWidth
                initialHeight = initialHeight < flick.height ? flick.height : flick.contentHeight
            }
    
            onPinchUpdated: {
    
                // resize content
                if(flick.contentWidth >= flick.width && flick.contentHeight >= flick.height){
                    flick.resizeContent(initialWidth * pinch.scale, initialHeight * pinch.scale, pinch.center)
                }
            }
    
            onPinchFinished: {
                // Move its content within bounds.
                flick.returnToBounds()
    
                //Make sure we cant make the contentwidth and contentheight smaller than the actual window
                if(initialWidth < flick.width || initialHeight < flick.height){
                    initialWidth = flick.width
                    initialHeight = flick.height
                }
                if(flick.contentWidth < flick.width){
                    flick.contentWidth = flick.width
                }
                if(flick.contentHeight < flick.height){
                    flick.contentHeight = flick.height
                }
    
            }
    
            //The snapshot
            Image{
                id: snapshotImage
                anchors.fill: parent
                source: snapController.url
    
                //When press and hold on the image, it zooms out to normal size
                MouseArea {
                    anchors.fill: parent
                    scrollGestureEnabled: false
                    onPressAndHold: {
                        flick.contentWidth = flick.width
                        flick.contentHeight = flick.height
                    }
    
    
                }
    
            }
        }
    }
    }
    
    //Row layout for the buttons
    RowLayout{
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
    
    
        //New picture button
        RectangularButton{
            id: takePictureButton
            text: "Take a new picture"
            anchors.bottom: parent.bottom
            anchors.right: screenshotButton.left
            anchors.margins: 10
            onClicked: {
                flick.contentHeight = flick.height
                flick.contentWidth = flick.width
            }
    
        }
    
        //Screenshot button
        RectangularButton{
            id: screenshotButton
            text: "Screenshot"
            anchors.bottom: parent.bottom
            anchors.right: savePictureButton.left
            anchors.margins: 10
            onClicked: {
                
                console.log("Take screenshot")
            }
        }
    
    
    
        //Save picture button
        RectangularButton{
            id: savePictureButton
            text: "Save picture"
            anchors.bottom: parent.bottom
            anchors.right: exitButton.left
            anchors.margins: 10
            onClicked: {
    
            }
    
        }
    
        //Button to exit
        RectangularButton{
            id: exitButton
            anchors.bottom: parent.bottom
            anchors.right: parent.right
            text: "Exit to mission view"
            anchors.margins: 10
    
        }
    }
    

    }

    @

    So my question is; How can I make that happen? Do I have to do it through c++, and how? Or is it possible to do directly through QML?

    Please help



  • Got it to work.

    Only had to do this:
    @
    //Screenshot button
    RectangularButton{
    id: screenshotButton
    text: "Screenshot"
    anchors.bottom: parent.bottom
    anchors.right: savePictureButton.left
    anchors.margins: 10
    onClicked: {

                //Take screenshot of the image
                flick.grabToImage(function(result) {
                    snapController.url = result.url
                }, Qt.size(snapshotViewItem.width,snapshotViewItem.height));
    
                //Update zoom and update image to save
                flick.contentHeight = flick.height
                flick.contentWidth = flick.width
            }
        }
    

    @