grabToImage save the delagate pathview qml

Question

Hello my question is the following I am trying to iterate over the pathview delegate but I am getting an error that it does not find the image I want to save after saving the path. I have already worked with grabToImage to save canvas, graphics and a couple of other things but nothing with pathview delegates.

And everything I find about grabToImage has nothing to do to find the solution to this particular problem.

If you can guide me or help me I would appreciate it in advance

import QtQuick 2.15
import QtQuick.Controls 2.12
import QtQuick.Window 2.2
import Qt.labs.platform 1.1

Window {
    width: 600
    height: 600
    
    visible: true
    
    ListModel {      
        id: modelcon
        ListElement { img: "test.jpg" }
        ListElement { img: "test.jpg" }
        ListElement { img: "test.jpg" }
        ListElement { img: "test.jpg" }
        ListElement { img: "test.jpg" }
        ListElement { img: "test.jpg" }
        ListElement { img: "test.jpg" }
    }
    
    PathView {
        id: imgView
        
        clip: true
        focus: true
        interactive: true
        pathItemCount: 3
        
        model: modelcon
        
        preferredHighlightEnd: 0.5
        preferredHighlightBegin: 0.5
        
        anchors.fill: parent
        
        function nextItem() {
            imgView.incrementCurrentIndex();
        }
        
        function preItem() {
            imgView.decrementCurrentIndex();
        }
        
        function toItem(index) {
            if (index <= imgView.itemCount && imgView.currentIndex !== index) {
                imgView.currentIndex = index;
            }
        }
        
        delegate: Image {
            x: (parent.width - width)/ 2
            y: (parent.height - height)/ 2
            z: PathView.iconOrder
            
            width: parent.width* 0.9
            height: parent.width * 0.4
            
            property bool rounded: true
            property bool adapt: true
            
            clip: true
            
            source: img
            
            scale: PathView.iconScale
            opacity: PathView.iconOpacity
        }

        path: Path {
            startX: 0
            startY: imgView.height * 0.5
            
            PathAttribute { name: "iconScale"; value: 0.2 }
            PathAttribute { name: "iconOpacity"; value: 10.2 }
            PathAttribute { name: "iconOrder"; value: 0 }
            PathLine {x: imgView.width / 2; y: imgView.height/2 }
            PathAttribute { name: "iconScale"; value: 1 }
            PathAttribute { name: "iconOpacity"; value: 1 }
            PathAttribute { name: "iconOrder"; value: 8 }
            PathLine {x: imgView.width; y: imgView.height/2 }
        }
        Button {
            id: btnOpen
            
            visible :true
            
            width: 80
            height: 80
            
            text: "Save"
            
            anchors.verticalCenterOffset: 0
            
            background: Rectangle {
                color: "#00000000"
            }
            onClicked:{
                filedialogSave.open()
            }
        }
    }
    
    FileDialog {
        id: filedialogSave;
        
        title: "Save image";
        
        nameFilters: ["Image Files (*.png)", "Image Files(*.jpg)"];
        
        visible: false
        fileMode: FileDialog.SaveFile
        
        onAccepted: {
            let ruta = currentFile.toString().replace('file: ///', '')
            
            imgView.grabToImage(function(result) {
                result.saveToFile(ruta)
            });
            
            filedialogSave.close()
        }
    }
}

Answer 1

I found the solution

    function grabToImage(item, fileName) {
    item.grabToImage(function(image) {
        image.saveToFile(fileName);
    });
   }

Consists of iterating on the item outside the delegate with its parent "item" which composes all QtQuick.Controls components.

grabToImage( id , "filename.extension") 

It is placed in the main parent and then grabToImage( id , "filename.extension") is normally called.

Answer 2

If you want to access the delegates image, put your delegate into an Item and assert the property pointing to your delegate's modeldata.

    delegate:
        Item {
        property var modelData:model
        Image {
            x: (parent.width - width)/ 2
            y: (parent.height - height)/ 2
            z: PathView.iconOrder

            width: parent.width* 0.9
            height: parent.width * 0.4

            property bool rounded: true
            property bool adapt: true

            clip: true

            source: img

            scale: PathView.iconScale
            opacity: PathView.iconOpacity
        }
    }

access your image while saving like this:

imgView.currentItem.modelData.img