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

Getting pixel information under cursor



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


  • @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.



  • 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])
                }
            }
        }
    

Log in to reply