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

Invert greyscale Image?



  • I am using greyscale Image for png-based buttons. I need to invert the image bitmap when the background changes from white to black. How is this possible?

    Thanks!



  • @patrickkidd This did it, and required making an all-white mask png:

    import QtQuick 2.12
    import QtGraphicalEffects 1.13
    
    Rectangle {
    
        id: root
        property string source: 'icon.png'
        property bool inverted: true    
    
        height: 200
        width: 300
    
        Image {
            id: mainImage
            source: root.source
            anchors.fill: parent
            visible: !inverted
        }
    
        Image {
            id: allWhite
            visible: false
            source: 'resources/all-white.png'
        }
    
        Blend {
            visible: inverted
            source: mainImage
            foregroundSource: allWhite
            mode: 'negation'
            anchors.fill: parent
        }
    }
    


  • @patrickkidd This did it, and required making an all-white mask png:

    import QtQuick 2.12
    import QtGraphicalEffects 1.13
    
    Rectangle {
    
        id: root
        property string source: 'icon.png'
        property bool inverted: true    
    
        height: 200
        width: 300
    
        Image {
            id: mainImage
            source: root.source
            anchors.fill: parent
            visible: !inverted
        }
    
        Image {
            id: allWhite
            visible: false
            source: 'resources/all-white.png'
        }
    
        Blend {
            visible: inverted
            source: mainImage
            foregroundSource: allWhite
            mode: 'negation'
            anchors.fill: parent
        }
    }
    

Log in to reply