Буферы пикселей

При работе с Canvas вы можете получать с холста данные о пикселях, чтобы читать или управлять ими. Чтобы прочитать данные изображения, используйте createImageData(sw,sh) или getImageData(sx,sy,sw,sh). Обе функции возвращают объект ImageData с шириной (width), высотой (height) и переменной данных data. Переменная data содержит одномерный массив данных пикселей, полученных в формате RGBA, где каждое значение варьируется в диапазоне от 0 до 255. Чтобы установить пиксели на холсте, вы можете использовать функцию putImageData(imagedata, dx, dy).

Другой способ получить содержимое холста – сохранить данные в изображение. Этого можно добиться с помощью функций save(path) или toDataURL(mimeType) элемента Canvas, вторая из этих функций возвращает URL изображения, который может использоваться для загрузки элементом Image.

import QtQuick

Rectangle {
    width: 240; height: 120
    Canvas {
        id: canvas
        x: 10; y: 10
        width: 100; height: 100
        property real hue: 0.0
        onPaint: {
            var ctx = getContext("2d")
            var x = 10 + Math.random(80)*80
            var y = 10 + Math.random(80)*80
            hue += Math.random()*0.1
            if(hue > 1.0) { hue -= 1 }
            ctx.globalAlpha = 0.7
            ctx.fillStyle = Qt.hsla(hue, 0.5, 0.5, 1.0)
            ctx.beginPath()
            ctx.moveTo(x+5,y)
            ctx.arc(x,y, x/10, 0, 360)
            ctx.closePath()
            ctx.fill()
        }
        MouseArea {
            anchors.fill: parent
            onClicked: {
                var url = canvas.toDataURL('image/png')
                print('image url=', url)
                image.source = url
            }
        }
    }

    Image {
        id: image
        x: 130; y: 10
        width: 100; height: 100
    }

    Timer {
        interval: 1000
        running: true
        triggeredOnStart: true
        repeat: true
        onTriggered: canvas.requestPaint()
    }
}

В нашем маленьком примере мы рисуем на левом холсте каждую секунду маленький кружок. А когда пользователь кликает на область обработки событий мыши, содержимое холста сохраняется и извлекается URL изображения. Затем в правой части интерфейса нашего примера отображается изображение.

Теги