Pixel Buffers

When working with the canvas you are able to retrieve pixel data from the canvas to read or manipulate the pixels of your canvas. To read the image data use createImageData(sw,sh) or getImageData(sx,sy,sw,sh). Both functions return an ImageData object with a width, height and a data variable. The data variable contains a one-dimensional array of the pixel data retrieved in the RGBA format, where each value varies in the range of 0 to 255. To set pixels on the canvas you can use the putImageData(imagedata, dx, dy) function.

Another way to retrieve the content of the canvas is to store the data into an image. This can be achieved with the Canvas functions save(path) or toDataURL(mimeType), where the later function returns an image URL, which can be used to be loaded by an Image element.

  1. import QtQuick
  3. Rectangle {
  4.     width: 240; height: 120
  5.     Canvas {
  6.         id: canvas
  7.         x: 10; y: 10
  8.         width: 100; height: 100
  9.         property real hue: 0.0
  10.         onPaint: {
  11.             var ctx = getContext("2d")
  12.             var x = 10 + Math.random(80)*80
  13.             var y = 10 + Math.random(80)*80
  14.             hue += Math.random()*0.1
  15.             if(hue > 1.0) { hue -= 1 }
  16.             ctx.globalAlpha = 0.7
  17.             ctx.fillStyle = Qt.hsla(hue, 0.5, 0.5, 1.0)
  18.             ctx.beginPath()
  19.             ctx.moveTo(x+5,y)
  20.             ctx.arc(x,y, x/10, 0, 360)
  21.             ctx.closePath()
  22.             ctx.fill()
  23.         }
  24.         MouseArea {
  25.             anchors.fill: parent
  26.             onClicked: {
  27.                 var url = canvas.toDataURL('image/png')
  28.                 print('image url=', url)
  29.                 image.source = url
  30.             }
  31.         }
  32.     }
  34.     Image {
  35.         id: image
  36.         x: 130; y: 10
  37.         width: 100; height: 100
  38.     }
  40.     Timer {
  41.         interval: 1000
  42.         running: true
  43.         triggeredOnStart: true
  44.         repeat: true
  45.         onTriggered: canvas.requestPaint()
  46.     }
  47. }

In our little example, we paint every second a small circle on the left canvas. When the user clicks on the mouse area the canvas content is stored and an image URL is retrieved. On the right side of our example, the image is then displayed.