QML Image zoom screenshot

eiriham

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

eiriham

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

@