Javascript Image is not defined in QML

[MattP2]

Hello,

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?

[fcarney]

What version of ECMA script is Image supported in?
QML JS is the 7th edition.

I cannot find any reference to Image anywhere for javascript.

[fcarney]

Oh, its part of the DOM. Not part of Javascript at all. There is no DOM in QML.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

[MattP2]

You're right. Thanks for answering. I finally ended with a QImageProvider. My image provider takes a filename followed by a question mark and a color (image://myimageprovider/myicon.svg?red). I can then colorize my svg file (this is why i needed a new Image() ) from my image provider.

This is the qml part.

import QtQuick 2.11

Canvas {
    width: 200
    height: 200

    property string imageUrl: "image://myimageprovider/myicon.svg?red"

    Component.onCompleted: loadImage(imageUrl)
    onImageLoaded: requestPaint();

    onPaint: {
        var ctx = getContext("2d");
        ctx.drawImage(imageUrl, 0, 0, 32, 32);
    }
}