How to copy any part of the image to the other item in QML

Lisbetti

I have image inside rectangle with size e.g. 400x900. I need to scale/zoom part of the image in other place. If pressing some part of image e.g 50x50 size that part I need to copy and zoom in. How to do it?

I have tried opacitymask and grapToImage with no success.

p3c0

Hi @Lisbetti and Welcome,
AFAIK you will need some C++ API's as well for cropping the image. Once you grab the image using grapToImage call a C++ function and pass this image to it for further processing. Once you receive it on C++ side you have QImage::copy function to copy the desired part. This function too returns a QImage which you can send it to QML again for displaying.

Note: If you are a beginner C++ and QML interaction may sound a bit tedious. Pls refer the fine docs for further explanation:
http://doc.qt.io/qt-5/qtqml-cppintegration-topic.html
http://doc.qt.io/qt-5/qtqml-cppintegration-exposecppattributes.html
http://doc.qt.io/qt-5/qtqml-cppintegration-exposecppattributes.html#exposing-methods-including-qt-slots

MB75

Hi @Lisbetti,

Your question reminds me of a real-time "zoom" feature that clones part of a component that I've just developed using ShaderEffectSource.

ShaderEffectSource allows to select, in real time and with high performance, a part of a component and display it in another larger rectangle for zooming in.

// To add to your "source" component.
MouseArea {
    id: iMouseArea
    anchors.fill: parent

    hoverEnabled: true
    propagateComposedEvents: true
    onPositionChanged:(mouse) => {
                          // Allow events to be transmitted to components below.
                          mouse.accepted = false

                          iShaderEffectSource.sourceRect = Qt.rect(mouse.x-75, mouse.y-50, 150, 100)
                      }
}
...
Rectangle {
    id: iRectDest
    width: 300
    height: 200
    anchors.right: parent.right

    ShaderEffectSource {
        id: iShaderEffectSource
        anchors.fill: parent

        sourceItem: iRectSrc
        /* Preserve visual quality. */
        textureSize: Qt.size(iRectDest.width, iRectDest.height)
    }