Javascript Image is not defined in QML-CodePudding

I would like to use new Image() in my QML file (Qt 5.11). I use import ... as to avoid QML Image vs JS Image name clash. But now, the resulting error on the following minimal example is:

ReferenceError: Image is not defined

import QtQuick 2.11 as QQ

QQ.Canvas {
    width: 200
    height: 200

    onPaint: {
        // this is the javascript part.
        var img = new Image();
        // ...
    }
}

Any help is greatly appreciated to solve this. Do I need to install any packages on my OS (debian) for this to work?

CodePudding user response：

If you want to paint an image in a Canvas you need to use loadImage(). It will be loaded asynchronously and the canvas will emit imageLoaded when any new image has loaded.

You can then paint it with drawImage() and passing it the URL you loaded:

Canvas {
    property string imageUrl: "qrc://images/image.png"
    Component.onCompleted: loadImage(imageUrl)
    onImageLoaded: requestRepaint()
    onPaint: {
        var ctx = getContext("2d");
        ctx.drawImage(imageUrl);
    }
}