Getting pixel information under cursor

[FuzzyWombatPonies]

I create an image to display, the mousearea correctly shows the x,y locations. However, I need to extract a single pixel from the image(I am after the RGB values of said pixel) under the cursor. How can I go about doing this?

Image {
        id: image
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        fillMode: Image.Stretch
        source: "file:/home/user/.smah/assets/palette.png"

        MouseArea {
            id: mouseArea
            anchors.fill: parent
                    onClicked: {
                        console.log(mouseArea.mouseX + " " + mouseArea.mouseY )
                    }
        }
    }

[JonB]

@FuzzyWombatPonies
I know nothing about QML, but if the x, y you have is a point on a QImage then QRgb QImage::pixel(int x, int y) const returns a QRgb value? Or const uchar *QImage::bits() const if you need to examine a lot of pixels.

[FuzzyWombatPonies]

I managed to do the needful using Canvas:

    Canvas {
        id: canvas
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        width: 720
        height: 720
        onPaint: {
            var ctx = getContext("2d")
            if (canvas.isImageLoaded(rgb_palette)) {
                var im = ctx.createImageData(rgb_palette);
                ctx.drawImage(im, 0, 0)
            }
        }
        Component.onCompleted:loadImage(rgb_palette);
        onImageLoaded:requestPaint();

        MouseArea {
            id: mouseArea
            anchors.fill: canvas
            onClicked: {
                var ctx = canvas.getContext("2d")
                var id = ctx.getImageData(mouseArea.mouseX, mouseArea.mouseY, 1, 1)
                console.log(id.data[0], id.data[1], id.data[2])
            }
        }
    }