import sys
from PyQt5.QtGui import QGuiApplication
from PyQt5.QtQml import QQmlApplicationEngine
from PyQt5.QtCore import QObject, pyqtSignal, pyqtSlot


class Plot(QObject):
    def __init__(self):
        QObject.__init__(self)

    updCanvas = pyqtSignal(list, arguments=['upd'])

    @pyqtSlot(list)
    def upd(self, data):
        print(data)
        # do something with the data
        # and load it back in the canvas
        self.updCanvas.emit(data)


if __name__ == "__main__":
    sys.argv += ['--style', 'material']
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()
    plot = Plot()
    engine.rootContext().setContextProperty("plot", plot)
    engine.load("base.qml")
    engine.quit.connect(app.quit)
    sys.exit(app.exec_())

import QtQuick 2.0
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1
import QtQuick.Layouts 1.2
import QtQuick.Dialogs 1.0

ApplicationWindow {
    id: window
    visible: true
    width: 1000
    height: 750
    Material.theme: Material.Dark
    Material.background: "#2C303A"
    Material.accent: "#65B486"
    Material.foreground: "#efefef"

    Canvas {
            id: canvas
            x: 200
            y: 100
            height: 500
            width: 500
            property bool loaded: false
            property var filepath: ''
            property var toGrayscale: false

            onToGrayscaleChanged: requestPaint()
            onFilepathChanged: {
                    loadImage(filepath)
            }
            onImageLoaded: {
                    loaded = true
                    requestPaint()
            }
            onPaint: {
                    if (loaded) {
                            var ctx = getContext("2d");
                            ctx.drawImage(filepath, 0, 0, width, height)
                    }
                    if (toGrayscale) {
                            var ctx = getContext("2d");
                            var ar = ctx.getImageData(0, 0, width, height)
                            plot.upd(ar.data)
                    }
            }
        }

        FileDialog {
                id: fileDialog
                title: "Please choose a file"
                nameFilters: ["Image files (*.jpg *.png *.jpeg)"]
                onAccepted: {
                        console.log("You chose: " + fileDialog.fileUrls)
                        canvas.filepath = fileDialog.fileUrls
                        canvas.requestPaint()
                }
                onRejected: {
                        console.log("Canceled")
                }
        }

        Button {
                text: "choose image"
                onClicked: fileDialog.visible = true
        }

        Button {
                x: 150
                text: "toGrayscale"
                onClicked: canvas.toGrayscale = true
        }
        Connections {
            target: plot
            //onUpdCanvas: print('')
        }
    }