Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Javascript Image is not defined in QML
Forum Updated to NodeBB v4.3 + New Features

Javascript Image is not defined in QML

Scheduled Pinned Locked Moved Solved QML and Qt Quick
javascriptimagecanvas
4 Posts 2 Posters 1.3k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    MattP2
    wrote on last edited by
    #1

    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?

    1 Reply Last reply
    0
    • fcarneyF Offline
      fcarneyF Offline
      fcarney
      wrote on last edited by
      #2

      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.

      C++ is a perfectly valid school of magic.

      1 Reply Last reply
      1
      • fcarneyF Offline
        fcarneyF Offline
        fcarney
        wrote on last edited by
        #3

        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

        C++ is a perfectly valid school of magic.

        1 Reply Last reply
        3
        • M Offline
          M Offline
          MattP2
          wrote on last edited by
          #4

          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);
              }
          }
          
          1 Reply Last reply
          1

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved